🌜
🌞
qartjs

qartjs

v1.2.0

qart.js merge picture and QR code.

npm install qartjs

README

qart.js

CDNJS Downloads Version License
Merges Pictures and QR Codes for Artistic QR Codes.
qart.j

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:

Paypal me

LICENSE

GPLv3

General

License
GPL-3.0
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
3,034
Community Interest
3,167
Number of Forks
184

Maintenance

Commits
11/2110/2202
Last Commit
Open Issues
8
Closed Issues
16
Open Pull Requests
0
Closed Pull Requests
0

Versions

Versions Released
11/2110/2201
Latest Version Released
Jun 14, 2019
Current Tags
latest1.2.0

Contributors

kciter
kciter
Commits: 48
misteral
misteral
Commits: 10
harrisoff
harrisoff
Commits: 4
isonet
isonet
Commits: 2
superman66
superman66
Commits: 1
pvnr0082t
pvnr0082t
Commits: 1