QR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element).
npm install qrjs2QR 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 11
* generateSVG supports different colors for same page SVGs
* textcolor and fillcolor options introduced
* innerHTML 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
``js`
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
...
`
`js`
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:
`html`
Or a Data URI PNG string to IMG element's SRC attribute:
`html`
`js`
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:
`html``
...
Available under MIT license.