JS QRGen

This is a QRCode generator written in pure javascript, without any dependencies. (jQuery is not needed, either.)

Based on Kazuhiko Arase's QRCode .

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

Usage

Install with bower:

$ bower install jsqrgen

You may also download dist/qrgen.min.js manually.

Here is a simple example:

<script src="qrgen.min.js"></script>
<div id="qrcode"></div>
<script>
var canvas = qrgen.canvas({
        data: location.href
});
document.getElementById('qrcode').appendChild(canvas);
</script>

Check demo folder for more advanced examples.

中文说明 测试页面

Documentation

There will be a global variable qrgen with methods below:

• function qrgen.canvas( options )

  This is a function to build a QRCanvas object with a QRCode and a canvas built inside.

  options is an object with attributes below (all attributes are optional):

  Attribute	Type	Default	Description
  data	String	''	The data to be encoded in the QRCode, text will be encoded in UTF-8.
  cellSize [1]	Number	2	The pixel width or height of a cell. Default value is used only if neither cellSize nor size is provided.
  size [1]	Number	None	The pixel width or height of the entire image, ignored if cellSize is assigned.
  typeNumber	Number [1..10]	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.
  foreground [2]	String | Function	'black'	The foreground color or image of the QRCode.
  background [2]	String | Function	'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. fontFace: 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	{}	The object may have two attributes: key and value. effect.key = 'round' effect.value is a ratio between 0 and 0.5, making cells round with a border-radius of value * cellSize. effect.key = 'liquid' effect.value is a ratio between 0 and 0.5.

  A canvas will be returned.

[1]	(1, 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.

[2]

(1, 2) 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.

Known Issues

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