Skip to content

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

License

Notifications You must be signed in to change notification settings

englishextra/qrjs2

Repository files navigation

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

npm Build Status Codacy Badge jsdelivr

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.