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

Category: Javascript | December 13, 2016
Author: chuckfairy
Views Total: 4,581
Official Page: Go to website
Last Update: December 13, 2016
License: MIT

Preview:

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

Description:

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: "http://www.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

You Might Be Interested In:


Leave a Reply