Package Exports
- qartjs
- qartjs/dist/qart.min
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (qartjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
qart.js
Merges Pictures and QR Codes for Artistic QR Codes.
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. 😄