marvelefe / qrjs2

QR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element).

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.