kciter/qart.js

Generate artistic QR code.


repo name	kciter/qart.js
repo link	https://github.com/kciter/qart.js
homepage	https://kciter.github.io/qart.js/
language	JavaScript
size (curr.)	3245 kB
stars (curr.)	2739
created	2017-01-25
license	GNU General Public License v3.0

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