Customizable QR Code Generator In Vanilla JavaScript – qrjs2

Category: Javascript | April 20, 2017
Author: englishextra
Views Total: 387
Official Page: Go to website
Last Update: April 20, 2017
License: MIT

Preview:

Customizable QR Code Generator In Vanilla JavaScript – qrjs2

Description:

qrjs2 is a modified version of the qr.js that lets you generate customizable QR Codes using SVG, PNG and even HTML table element.

Installation:

# NPM
$ npm install qrjs2

# Bower
$ bower install qrjs2

How to use it:

Insert the main JavaScript file qrjs2.js into the document and you’re ready to go.

<script src="qrjs2.js"></script>

Generate an SVG based QR code inside your div element.

var svgElement = document.createElement("div"),
u = "http://cssscript.com",
s = QRCode.generateSVG(u, {
    //options here
  });
svgElement.appendChild(s);
document.body.appendChild(svgElement);

Generate a SVG  QR code with Data URIs and PNG fallback.

if (document.implementation.hasFeature("http://www.w3.org/2000/svg","1.1")) {
  var dataUriSvgImage = document.createElement("img"),
  u = "https://github.com",
  s = QRCode.generateSVG(u, {
      // options here
    });
  var XMLS = new XMLSerializer();
  s = XMLS.serializeToString(s);
  s = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(s)));
  dataUriSvgImage.src = s;
  document.body.appendChild(dataUriSvgImage);
}
var dataUriPngImage = document.createElement("img"),
u = "https://github.com",
s = QRCode.generatePNG(u, {
    // options here
  });
dataUriPngImage.src = s;
document.body.appendChild(dataUriPngImage);

Generate an html table based QR code.

var htmlTable = document.createElement("div"),
u = "http://cssscript.com",
s = QRCode.generateHTML(u, {
    // options here
  });
htmlTable.appendChild(s);
document.body.appendChild(htmlTable);

All default options to customize the QR codes.

// 'L', 'M', 'Q' and 'H'
ecclevel: "M",

// fill color
fillcolor: "#FFFFFF",

// text color
textcolor: "#373737",

// margin size
margin: 4,

// module size
modulesize: 8