VanillaQR clientside javascript QR code generator

A small javascript file for creating qr codes on the fly using the HTML5 Canvas element. By default VanillaQR.js will output a canvas element as it's domElement. If the canvas element and 2d context is not supported, it will create a table instead. Tables will not be able to output images so be sure to check that the image element exists.

How to use

1<script src="VanillaQR.min.js"></script>
2<script>
3
4//Create qr object
5//Minus the url, these are the defaults
6var qr = new VanillaQR({
7
8    url: "https://github.com/chuckfairy/VanillQR.js",
9    size: 280,
10
11    colorLight: "#ffffff",
12    colorDark: "#000000",
13
14    //output to table or canvas
15    toTable: false,
16
17    //Ecc correction level 1-4
18    ecclevel: 1,
19
20    //Use a border or not
21    noBorder: false,
22
23    //Border size to output at
24    borderSize: 4
25
26});
27
28//Canvas or table is stored in domElement property
29document.body.appendChild(qr.domElement);
30
31//Alternatively you can create an image from the canvas
32//png, jpg, jpeg, webp, gif, bmp, tiff, x-icon, svg+xml, xxx
33//Currently canvas dataURL mime types are not the same
34var imageElement = qr.toImage("png");
35
36if(imageElement) {
37    document.body.appendChild(imageElement);
38}
39
40
41//You can recreate the qr code to a new url like so
42//If you have appended the domElement it will change
43qr.url = "https://github.com/chuckfairy";
44qr.colorLight = "#0000000";
45qr.colorDark = "#ffffff";
46qr.init();
47
48</script>

Through module

1import VanillaQR from "VanillaQR"
2
3
4//See above for more
5var qr = new VanillaQR({
6    url: "https://github.com/chuckfairy/VanillQR.js",
7});

Browser support

All browsers with canvas and canvas 2d context support

• Chrome > 30
• IE > 8
• Firefox > 33
• Opera > 25
• Safari > 7.0
• Android > 4.0

Table support fallback

• Chrome
• IE > 6
• Firefox
• Opera
• Safari
• Andriod

Vanilla QR is based on a port of a java qr code library that I can no longer find. When I do find it I'll be sure to give it proper credit. Thank you and have a nice day!

Live Demos

• Demo > http://chuckfairy.com/VanillaQR.js/example.html
• Creator > http://chuckfairy.com/VanillaQR.js/creator/

Special Thanks

• @alberto-salinas