QR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element).
MIT License
QR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element). Based on lifthrasiir/qr.js
generateSVG
now works in Edge 13 and IE 11generateSVG
supports different colors for same page SVGstextcolor
and fillcolor
options introducedinnerHTML
replaced with document.createDocumentFragment()
https://cdn.jsdelivr.net/gh/englishextra/qrjs2@latest/js/qrjs2.min.js
https://unpkg.com/qrjs2@latest/js/qrjs2.js
npm install qrjs2
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>
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,...">
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>
Available under MIT license.