Neurotic Pumpkin Murderer

    qrjs2

    0.1.11 • Public • Published

    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.

    Install

    npm i qrjs2

    DownloadsWeekly Downloads

    268

    Version

    0.1.11

    License

    (MIT)

    Unpacked Size

    36.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • englishextra