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

Category: Javascript | December 13, 2016
Author:chuckfairy
Views Total:6,068 views
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: "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

You Might Be Interested In:


Leave a Reply