Glance At
https://kciter.github.io/qart.js/
Installation
NPM
$ npm install qartjs
or clone this repository and copy qart.min.js to your project.
CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/qartjs/1.0.2/qart.min.js"></script>
Usage
In the browser
<script src="../dist/qart.min.js"></script>
<script>
// directly appending canvas to the document
new QArt({
value: value,
imagePath: './example.png',
filter: filter,
size: 195
}).make(document.getElementById('qart'));
// using callback
new QArt({
value: value,
imagePath: './example.png',
filter: filter,
size: 195
}).make(function (canvas) {
document.getElementById('qart').appendChild(canvas)
});
</script>
With ES6
import QArt from 'qartjs';
const qart = new QArt({
value: value,
imagePath: './example.png',
filter: filter,
size: 195
});
// directly appending canvas to the document
qart.make(document.getElementById('qart'))
// using callback
qart.make((canvas) => {
document.getElementById('qart').appendChild(canvas);
});
With React
This is a simple implementation of QArt as React Component. react-qart
With Angular.JS
There is a directive available for using qart.js in Angular.js: angular-qart
With Vue 2.x
There is a directive available for using qart.js in Vue.js 2.x : vue-qart
Options, Field, Type, Description, Default, -----, ----, -----------, -------, value, String, The data of the QR code., Required, imagePath, String, The path of the combined image., Required, filter, String, Define an image filter. threshold or color, threshold, size, Integer, Define an image size in pixels., 195, version, Integer, QRCode version (1 <= version <= 40), 10, background, CSSColor, Implement background if exist, undefinded, fillType, scale_to_fit/fill, Place image type(fill or scale to fit), scale_to_fit
Dependency
Inspire
TODO
- Server-Side Rendering.
- CLI Command.
Donate
If you like this open source, you can sponsor it. :smile: