qrjs2

qrjs2

QR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element). Based on lifthrasiir/qr.js

Demo

codepen jsfiddle jsbin

Fixes / Added Features

• generateSVG now works in Edge 13 and IE 11
• generateSVG supports different colors for same page SVGs
• textcolor and fillcolor options introduced
• innerHTML replaced with document.createDocumentFragment()

CDN

jsDelivr

https://cdn.jsdelivr.net/gh/englishextra/qrjs2@latest/js/qrjs2.min.js

unpkg

https://unpkg.com/qrjs2@latest/js/qrjs2.js

Usage and Output

Install

npm install qrjs2

SVG Element (yeah, give it to me)

var div = document.createElement("div"),
text = "https://github.com",
qr = QRCode.generateSVG(text, {
    ecclevel: "M",
    fillcolor: "#F2F2F2",
    textcolor: "#D13438",
    margin: 4,
    modulesize: 8
  });
div.appendChild(qr);
document.body.appendChild(div);

Will add an SVG element to parent DIV:

<svg viewBox="0 0 264 264" style="shape-rendering:crispEdges">
  <style scoped="scoped">.bg{fill:#F2F2F2}.fg{fill:#D13438}</style>

  <rect class="bg" fill="none" x="0" y="0" width="264" height="264"></rect>
      <rect class="fg" fill="none" x="32" y="32" width="8" height="8"></rect>
    ...
</svg>

Data URI SVG String with Data URI PNG String Fallback

var img = document.createElement("img"),
text = "https://github.com";
if (document.implementation.hasFeature("http://www.w3.org/2000/svg","1.1")) {
  var qr = QRCode.generateSVG(text, {
      ecclevel: "M",
      fillcolor: "#E6E6E6",
      textcolor: "#486860",
      margin: 4,
      modulesize: 8
    });
  var XMLS = new XMLSerializer();
  qr = XMLS.serializeToString(qr);
  qr = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(qr)));
} else {
  var qr = QRCode.generatePNG(text, {
      ecclevel: "M",
      format: "html",
      fillcolor: "#CCCCCC",
      textcolor: "#006F94",
      margin: 4,
      modulesize: 8
    });
}
img.src = qr;
document.body.appendChild(img);

Will add a Data URI SVG string to IMG element's SRC attribute:

<img src="data:image/svg+xml;base64,...">

Or a Data URI PNG string to IMG element's SRC attribute:

<img src="data:image/png;base64,...">

HTML Table Element

var div = document.createElement("div"),
text = "https://github.com",
qr = QRCode.generateHTML(text, {
    ecclevel: "M",
    fillcolor: "#DCDCDC",
    textcolor: "#5C2E91",
    margin: 4,
    modulesize: 8
  });
div.appendChild(qr);
document.body.appendChild(div);

Will add an HTML table element to parent DIV:

<table style="border:32px solid #DCDCDC;background:#DCDCDC" cellspacing="0" cellpadding="0" border="0">
  <tbody>
      <tr>
          <td style="width:8px;height:8px;background:#5C2E91"></td>
      ...
    </tr>
  </tbody>
</table>

License

Available under MIT license.