Home

Deprecated in favor of qrcanvas

• Demo

This is a QRCode generator written in pure javascript.

Based on Kazuhiko Arase's QRCode .

The only requirement is that the browser works with a canvas, which is supported by most modern browsers.

Installation

# Via NPM
$ npm install jsqrgen

# Via bower
$ bower install jsqrgen

Usage

<!-- HTML -->
<div id="qrcode"></div>

// JavaScript
// There are several ways to load qrgen

// 1. Via ES6
import qrgen from 'jsqrgen';

// 2. Via Global
// HTML: <script src="qrgen.js"></script>
// You will get a global variable `qrgen`

// Generate QRCode
const canvas = qrgen.canvas({
  data: location.href
});
document.getElementById('qrcode').appendChild(canvas);

Check demo folder for more advanced examples.

Browser Compatibility

Firefox	Yes
Chrome	Yes
Internet Explorer	9+
Opera	121 , 15+
Safari	Yes

Documentation

UMD is supported. The exported object (qrgen as global) has methods below:

• function qrgen.canvas( options )

  This is a function to build a QRCode and render it to a canvas.

  options is an object with optional properties below:

  Property	Type	Default	Description
  data	String	''	The data to be encoded in the QRCode, text will be encoded in UTF-8.
  cellSize2	Number	2	The pixel width or height of a cell. Default value is used only if neither cellSize nor size is provided.
  size3	Number	None	The pixel width or height of the entire image, ignored if cellSize is assigned.
  typeNumber	Number [1..40]	Auto	The type number of the QRCode. If too small to contain the data, the smallest valid type number will be used instead.
  correctLevel	String {'L', 'M', 'Q', 'H'}	'M'	The correct level of QRCode. When logo is assigned, correctLevel will be set to H.
  foreground4	Image | Canvas | String | Array	'black'	The foreground color or image of the QRCode.
  background5	Image | Canvas | String | Array	'white'	The background color or image of the QRCode.
  logo	Object	{}	The object may have attributes below (all optional): if image: `image`: An Image element with the image to be drawn in the middle of the canvas. if text: `text`: The text to be drawn as logo. `color`: Logo text color, default as black. `fontStyle`: Logo text style, e.g. italic bold. `fontFamily`: Logo text font face, default as Cursive. common attributes: `clearEdges`: A number to decide the level to clear the cells broken by the image, default as 0. `margin`: The pixel gap between the image and the QRCode cells around it, default as 2. `size`: A float stands for the ratio of logo size to the QRCode size, default as .15, which is recommended.
  effect	Object	{}	effect.key = 'round' effect.value is a ratio between 0 and 1. effect.key = 'liquid' effect.value is a ratio between 0 and 1. effect.key = 'image' effect.value is a ratio between 0 and 1. options.background will be shown as the background image.
  reuseCanvas	Canvas	None	The final image will be painted to reuseCanvas if provided.
  noAlpha	Boolean	true	Whether alpha channel should be removed.

  Return a canvas.

---

1. Opera 12 (Presto) has problems with canvas.arcTo, so effects will probably fail.↩

2. It is highly recommended to use cellSize instead of size because when size is assigned and the calculated cellSize is not an integer, the final image may be stretched and thus blurred.↩

3. It is highly recommended to use cellSize instead of size because when size is assigned and the calculated cellSize is not an integer, the final image may be stretched and thus blurred.↩

4. Both foreground and background can be an image (Image or Canvas), a string of CSS color, or an array of objects with attributes below:

   Attribute	Type	Default	Description
   col	Number	Use x instead	Column index of the start position.
   row	Number	Use y instead	Row index of the start position.
   cols	Number	Use width instead	Number of columns involved in current style.
   rows	Number	Use height instead	Number of rows involved in current style.
   x	Number	0	X of start position.
   y	Number	0	Y of start position.
   width	Number	Full width	Width of block involved in current style.
   height	Number	Full height	Height of block involved in current style.
   style	String	'black'	CSS style to fill the area defined by other attributes.

   ↩

5. Both foreground and background can be an image (Image or Canvas), a string of CSS color, or an array of objects with attributes below:

   Attribute	Type	Default	Description
   col	Number	Use x instead	Column index of the start position.
   row	Number	Use y instead	Row index of the start position.
   cols	Number	Use width instead	Number of columns involved in current style.
   rows	Number	Use height instead	Number of rows involved in current style.
   x	Number	0	X of start position.
   y	Number	0	Y of start position.
   width	Number	Full width	Width of block involved in current style.
   height	Number	Full height	Height of block involved in current style.
   style	String	'black'	CSS style to fill the area defined by other attributes.

   ↩