QR Code Generating with Vanilla JavaScript

Generate QR Code using Vanilla JS that allows you to create customizable QR codes using SVG, PNG, and HTML table elements.

javascript qr code generator with logo, qr code generator github, html qr code generator, qr code algorithm javascript, browser qr code generator, jquery qr code generator

How to make use of it:

Installation:

# NPM
$ npm install qrjs2

# Bower
$ bower install qrjs2

Insert the principle JavaScript file qrjs2.js into the doc and also you’re able to go.

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

Generate an SVG-based mostly QR code inside your div component.

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

Generate an 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 = "",
s = QRCode.generateHTML(u, {
    // options here
  });
htmlTable.appendChild(s);
document.body.appendChild(htmlTable);

All default choices 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

Customizable QR Code Generator, qrjs2 Plugin/Github, javascript qr code generator svg, jquery qr code generator codepen