Canvas Based QR Code Generator with Pure JavaScript – VanillaQR.js

VanillaQR.js helps you generate Html5 canvas or HTML table based customizable QR codes in vanilla JavaScript.

How to use it:

Load the VanillaQR.js JavaScript library in your document.

<script src="VanillaQR.min.js"></script>

Customize the QR Code.

var qr = new VanillaQR({
    // url
    url: "https://cssscript.com/",
    // width/height in pixels
    width: 400,
    height: 400,
    // colors
    colorLight: "#FAA7F9",
    colorDark: "#3A005E",
    // output as table or canvas
    toTable: false,
    // Ecc correction level 1-4
    ecclevel: 1
    // Use a border or not
    noBorder: false,
    // Border size to output at
    borderSize: 4
});

Convert the canvas QR code to PNG. All possible formats:

• png
• jpg
• jpeg
• webp
• gif
• bmp
• tiff
• x-icon
• svg+xml

var imageElement = qr.toImage("png");

Append the QR code to your body.

document.body.appendChild(imageElement);

Changelog:

12/13/2016

• Merge with no border, variable localization, noBorder camelcase, bin build ad, examples add, table borderSize add