THEMETRIAL

Customizable QR Code Generator In Vanilla JavaScript – qrjs2

Author:englishextra
Views Total:7 views
Official Page:Go to website
Last Update:April 11, 2021
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="https://www.cssscript.com/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)

v0.1.7 (11/26/2020)

v0.1.6 (10/23/2017)

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

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.