Merges Pictures and QR Codes for Artistic QR Codes.
https://kciter.github.io/qart.js/
If you like this open source, you can sponsor it. ๐
Litecoin: LZSFLGDLe1pBxQB7v54kEcobYnu1uAR9U6
Bitcoin: 1Hrauu2sPczma53gpYU4Y2kap5Hi6K3Ma3
$ npm install qartjs
or clone this repository and copy qart.min.js
to your project.
<script src="//cdnjs.cloudflare.com/ajax/libs/qartjs/1.0.2/qart.min.js"></script>
<script src="../dist/qart.min.js"></script>
<script>
var qart = new QArt({
value: value,
imagePath: './example.png',
filter: filter,
size: 195
}).make();
document.getElementById('qart').appendChild(qart);
</script>
import QArt from 'qartjs';
const qart = new QArt({
value: value,
imagePath: './example.png',
filter: filter,
size: 195
});
document.getElementById('qart').appendChild(qart.make());
This is a simple implementation of QArt as React Component. react-qart
There is a directive available for using qart.js in Angular.js: angular-qart
There is a directive available for using qart.js in Vue.js 2.x : vue-qart
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 |
- Server-Side Rendering.
- CLI Command.