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.
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.
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
andvalue
.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
|
Opera 12 (Presto) has problems with canvas.arcTo
, so effects will probably fail.