Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chuckfairy/vanillaqr.js
The galaxy's most resilient javascript QR code generator
https://github.com/chuckfairy/vanillaqr.js
canvas-element javascript qrcode qrcode-generator table
Last synced: about 1 month ago
JSON representation
The galaxy's most resilient javascript QR code generator
- Host: GitHub
- URL: https://github.com/chuckfairy/vanillaqr.js
- Owner: chuckfairy
- License: mit
- Created: 2015-02-11T21:12:56.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2020-05-11T21:26:44.000Z (over 4 years ago)
- Last Synced: 2024-11-10T16:32:13.509Z (about 2 months ago)
- Topics: canvas-element, javascript, qrcode, qrcode-generator, table
- Language: JavaScript
- Size: 62.5 KB
- Stars: 74
- Watchers: 4
- Forks: 15
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VanillaQR clientside javascript QR code generator
A small javascript file for creating qr codes on the fly using the HTML5 Canvas element. By default VanillaQR.js will output a canvas element as it's domElement. If the canvas element and 2d context is not supported, it will create a table instead. Tables will not be able to output images so be sure to check that the image element exists.
## How to use
```html
//Create qr object
//Minus the url, these are the defaults
var qr = new VanillaQR({
url: "https://github.com/chuckfairy/VanillQR.js",
size: 280,
colorLight: "#ffffff",
colorDark: "#000000",
//output to table or canvas
toTable: false,
//Ecc correction level 1-4
ecclevel: 1,
//Use a border or not
noBorder: false,
//Border size to output at
borderSize: 4
});
//Canvas or table is stored in domElement property
document.body.appendChild(qr.domElement);
//Alternatively you can create an image from the canvas
//png, jpg, jpeg, webp, gif, bmp, tiff, x-icon, svg+xml, xxx
//Currently canvas dataURL mime types are not the same
var imageElement = qr.toImage("png");
if(imageElement) {
document.body.appendChild(imageElement);
}
//You can recreate the qr code to a new url like so
//If you have appended the domElement it will change
qr.url = "https://github.com/chuckfairy";
qr.colorLight = "#0000000";
qr.colorDark = "#ffffff";
qr.init();
```
Through module
```js
import VanillaQR from "VanillaQR"
//See above for more
var qr = new VanillaQR({
url: "https://github.com/chuckfairy/VanillQR.js",
});
```
## Browser support
All browsers with canvas and canvas 2d context support
* Chrome > 30
* IE > 8
* Firefox > 33
* Opera > 25
* Safari > 7.0
* Android > 4.0
Table support fallback
* Chrome
* IE > 6
* Firefox
* Opera
* Safari
* Andriod
Vanilla QR is based on a port of a java qr code library that I can no longer find. When I do find it I'll be sure to give it proper credit. Thank you and have a nice day!
## Live Demos
* Demo > http://chuckfairy.com/VanillaQR.js/example.html
* Creator > http://chuckfairy.com/VanillaQR.js/creator/
## Special Thanks
- @alberto-salinas