Using RQRCode Gem to generate QR Code in rails as png and svg images — step by step

Want your first own QR Code ? which has some hidden data or URL in it. Continue reading …

Scan to see where it takes you 🌈

RQRCode is a gem or can say a library for Ruby on Rails application which helps to create and render QR Codes in various formats such as png, svg, ansi etc.
In this tutorial you will learn how to create png and svg type QR Codes using thisrqrcodegem.

So lets get started ..

Prerequisites :

We will target following version:
ruby 2.6+

1. Add Gem to your Gemfile:

gem 'rqrcode'

2. Run bundle install on terminal:

bundle install

Now, as we have successfully installed the gem, it provides us some inbuilt modules, classes and methods. We will be using QRCode Class which is inside RQRCode Module.
Lets assume we have a Product Model and on each product’s details page we want to show a QR Code of that product, which when scanned gives few details of that product such as id, name, price.

3. Open your specific controller. Here ProductsController
app/controllers/products_controller.rb

We will make both (png and svg) instances with content which is encrypted inside QR. Code to generate both is almost same BUT how to display them is entirely different.

Class ProductsController < ApplicationController
  def show
    #first things first, fetch a product
    @product = Product.find_by(id: params[:id])
    
    #Now creating a QR Code with above products details
    content = "Hello World."
    
    #For PNG image
    @qr_png = RQRCode::QRCode.new(content).as_png
    
    # For SVG image
    @qr_svg = RQRCode::QRCode.new(content).as_svg
  end
end

*** For actual product details in QR Code ***
Replace your "content" variable with something like :-
content = "ID: #{@product.id} \nName: #{@product.name} \nPrice: #{@product.price}"
CONTENT can also be an URL. 
Example:
content = "https://medium.com/@nikhil.1pariyani/implementing-act-as-paranoid-gem-soft-delete-in-rails-app-step-by-step-6940bd9cb542"
This will take you to one of my another medium article.

4. To display this QR, open your view file. Here it is
app/views/products/show.html.erb

For PNG :

#add this where you want to display
<%= image_tag(@qr_png.to_data_url) %>

For SVG :

#add this where you want to display
<%= raw(@qr_svg.html_safe) %>

That’s all 🎉

Above code creates a QR Code with simple text saying “Hello World.” Try it below.

Say Hello World

For more customizations you can pass options to as_png and as_svg

1. Options for as_png :

fill  - For background color. Default is 'white'
color - For foreground color. default is 'black'
size  - Total size of PNG in pixels. The module size is calculated so it fits.
        (defaults to 120)
border_modules - Width of white border around the modules.
                 (defaults to 4).

When option :file is supplied you can use the following ChunkyPNG constraints:

color_mode  - The color mode to use. Use one of the ChunkyPNG::COLOR_* constants.
              (defaults to 'ChunkyPNG::COLOR_GRAYSCALE')
bit_depth   - The bit depth to use. This option is only used for indexed images.
              (defaults to 1 bit)
interlace   - Whether to use interlacing (true or false).
              (defaults to ChunkyPNG default)
compression - The compression level for Zlib. This can be a value between 0 and 9, or a
              Zlib constant like Zlib::BEST_COMPRESSION
              (defaults to ChunkyPNG default)

#Example:
content = "https://medium.com/@nikhil.1pariyani/using-rqrcode-gem-to-generate-qr-code-in-rails-as-png-and-svg-images-step-by-step-4961ff7d2808"
@qr_png = RQRCode::QRCode.new(content).as_png(
  bit_depth: 1,
  border_modules: 4,
  color_mode: ChunkyPNG::COLOR_GRAYSCALE,
  color: "black",
  file: nil,
  fill: "white",
  module_px_size: 6,
  resize_exactly_to: false,
  resize_gte_to: false,
  size: 120
)

2. Options for as_svg :

fill - Background color e.g "ffffff" or :white or :currentColor
       (default none)
color - Foreground color e.g "000" or :black or :currentColor
        (default "000")
module_size - The Pixel size of each module
              (defaults 11)
offset      - Padding around the QR Code in pixels
              (default 0)
shape_rendering - SVG Attribute: auto | optimizeSpeed | crispEdges | geometricPrecision
                  (defaults crispEdges)
standalone - Whether to make this a full SVG file, or only an svg to embed in other svg
             (default true)
use_path   - Use <path> to render SVG rather than <rect> to significantly reduce size.
             This will become the default in future versions.
             (default false)
viewbox    - Replace the `svg.width` and `svg.height` attribute with `svg.viewBox` to
                  allow CSS scaling
                  (default false)
svg_attributes - A optional hash of custom <svg> attributes. Existing attributes will remain.
                  (default {})

#Example
content = "https://medium.com/@nikhil.1pariyani/using-rqrcode-gem-to-generate-qr-code-in-rails-as-png-and-svg-images-step-by-step-4961ff7d2808"
@qr_svg = RQRCode::QRCode.new(content).as_svg(
  color: "000",
  shape_rendering: "crispEdges",
  module_size: 11,
  standalone: true,
  use_path: true
)

That's all. Thank you for reading.
Enjoyed reading this article? Give it a round of applause by clapping 👏 and share your thoughts in the comments section below.