qrjs2
qrjs2 copied to clipboard
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
Fixes / Added Features
-
generateSVG
now works in Edge 13 and IE 11 -
generateSVG
supports different colors for same page SVGs -
textcolor
andfillcolor
options introduced -
innerHTML
replaced withdocument.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.