Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/englishextra/qrjs2
QR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element).
https://github.com/englishextra/qrjs2
app front-end html javascript js qr qr-code qrcode qrcode-generator svg svg-images vanilla-js webapp
Last synced: about 2 months ago
JSON representation
QR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element).
- Host: GitHub
- URL: https://github.com/englishextra/qrjs2
- Owner: englishextra
- License: mit
- Created: 2017-03-16T15:36:36.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-09-30T17:10:05.000Z (about 3 years ago)
- Last Synced: 2024-10-07T07:48:33.436Z (3 months ago)
- Topics: app, front-end, html, javascript, js, qr, qr-code, qrcode, qrcode-generator, svg, svg-images, vanilla-js, webapp
- Language: JavaScript
- Homepage: https://codepen.io/englishextra/pen/NpwjKW
- Size: 1.19 MB
- Stars: 75
- Watchers: 6
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://github.com/lifthrasiir/qr.js)
[](https://www.npmjs.com/package/qrjs2)
[](https://travis-ci.com/englishextra/qrjs2)
[](https://www.codacy.com/manual/englishextra/qrjs2/dashboard?utm_source=github.com&utm_medium=referral&utm_content=englishextra/qrjs2&utm_campaign=Badge_Grade)
[](https://www.jsdelivr.com/package/npm/qrjs2)
## Demo
[codepen](https://codepen.io/englishextra/full/NpwjKW)
[jsfiddle](https://fiddle.jshell.net/englishextra/Lp37dL94/show/)
[jsbin](https://output.jsbin.com/hobetuh/)
## 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)
```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
.bg{fill:#F2F2F2}.fg{fill:#D13438}
...
```
### Data URI SVG String with Data URI PNG String Fallback
```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
```
### HTML Table Element
```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](https://opensource.org/licenses/MIT).