Customizable QR Code Generator In Vanilla JavaScript – qrjs2

Preview:

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 = "https://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 = "https://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

Changelog:

v0.1.9 (04/11/2021)

• Refactor

v0.1.7 (11/26/2020)

• Refactor

v0.1.6 (10/23/2017)

• Removed mentioning of CSS, because there isn’t one for this library