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

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

$3

https://cdn.jsdelivr.net/gh/englishextra/qrjs2@latest/js/qrjs2.min.js

$3

https://unpkg.com/qrjs2@latest/js/qrjs2.js

Usage and Output

Install

npm install qrjs2

$3

``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





...

`

$3

`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

`

$3

`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






...



``

License

Available under MIT license.