kciter / qart.js

Generate artistic QR code. 🎨

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="https://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

• qrcode

Inspire

• CuteR

TODO

• Server-Side Rendering.
• CLI Command.

Donate

If you like this open source, you can sponsor it. 😄

LICENSE

GPLv3

qart.js's Issues

Add Documentation to include cdn

@kciter Looks like qart.js was made available on cdnjs.com. https://cdnjs.cloudflare.com/ajax/libs/qartjs/1.0.2/qart.min.js

Could I update the readme to include using the cdn?

'filltype' doesn 't work;

'filltype' doesn 't work，only see the color qr

How to resize the size of qart

#Now the size of qart is 195px195px,I want to resize to 200px200px

Image background not working

You can see code used to render both objects at the bottom

I copied the code from qrImage.onload to see whether it was failing to fetch the image but no, that bit works fine as can be seen

quality

Great project.. I was wondering, is there a way of making the quality for the Qr code and image combo better?

Node version?

Would be great to have this work in Node. There is a 'canvas' module that simulates the browser canvas

Error: code length overflow

when I set config.value with a long string value, such as below:

Authentication=BasicNzRlMDVlMjAzNDkxMTFlN2I2ODc5MmViY2I2N2ZlMzM&QRCode=vUURURD45fEHg/+YpAH8elQHkcvIMHNZ0M4t69bTlNux1t7DZm3d6Q==

it will be error:

Error: code length overflow. (1036>976)

请问可以只要一个普普通通的二维码吗？

我这边的需求很简单，就是只需要一个普通的二维码，不需要用普通的二维码和照片合成，就只是一张普通的二维码，请问该怎么修改您提供的配置参数呢？

QR Codes take a very long time to be recognized

I am trying to scan codes with "Barcode Scanner" (Play Store / F-Droid) on an android device. I can't scan the provided QR-Code. Might either be the example, or the processing in general.

use `qrcode-generator` as package dependency?

Hello, thank you for the amazing qart.

Wondering if it's possible to use https://www.npmjs.com/package/qrcode-generator as dependency rather than including qrcode.js in the bundle? or maybe expose qrcode API ?

The situation I encountered is to need both API of qart and qrcode, since qart didn't expose the qrcode API, will need to install the origin qrcode-generator. This makes the bundle size bigger than it should. :)

the make() API had been modified

document.getElementById('qart').appendChild(qart.make()) not work

qart.make(document.getElementById('qart')) worked

Doesn't work with cyrillic text

When i enter text in Russian (e.g. "Привет") on https://kciter.github.io/qart.js/ , QR code that was shown (both normal and qart) decodes in "?@825B"

I guess qart doesn't support Unicode? 🤔

size option doesn't works

hey @kciter
I found qartjs download from npmjs wasn't latest when I want to update vue-qart directive for the size option.
I can not find size option in source code.

min version - too big ?

Hi, thanks to share your nice project.

is it normal to have your qart.min.js size bigger than your qart.js ?

Last character from the text input is ignored. (Demo page)

On the demo page, if for example you type test, the qrcode only has tes as the text value.

I created 2 PRs, one for the master and one for gh-pages.

Cool project btw!

请问什么时候发布最新版本到npms上？

使用vue-qart时size等不生效，作者解释是需要qart.js发布最新版到npm

value limitation

Hi, thanks for sharing this project, do you think it will be possible to have more than 112 chars in the value?

minified js ignores version option

Hi there!
Version option works with qart.js but not with qart.min.js. Seems like it always uses 10.
I receive the following error no matter what version i set:

Uncaught Error: code length overflow. (1196>976)
    at C (qart.min.js:1)
    at x (qart.min.js:1)
    at M (qart.min.js:1)
    at Object.A.make (qart.min.js:1)
    at t.value (qart.min.js:1)
    at createQart (remote.js:18)
    at HTMLButtonElement.<anonymous> (remote.js:25)
    at HTMLButtonElement.dispatch (jquery.min.js:3)
    at HTMLButtonElement.q.handle (jquery.min.js:3)

Guessing minified js is not up to date.

Is it possible to increase the size of the dots ?

Failed to execute 'getImageData' on 'CanvasRenderingContext2D'

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

CoverImage disappear in v1.1.2

CoverImage disappear in v1.1.2

ImagePath has no effect

cross domain

canvas can't load cross domain images. the obj canvas can be exposed?

qart as a React component

Hi all

Sorry for my missing information about the library but the job you have done looks pretty nice. I have just wondered that you have a plan to develop this library as a React component as well?

Thanks

Baris

code length overflow. Still occurring...

I though this was all fixed but it doesnt seem like it. Maybe I am doing something wrong?

const qart = new QArt({
value: url, //my base64 image
imagePath: './icon.png',
filter: "color",
size: 195, //default
version: 40
});

     // using callback
    qart.make((canvas) => {
      document.getElementById('qart').appendChild(canvas);
    });

ERROR
o {message: "code length overflow. (840292>10208)", name: "CodeLengthOverflow"}
"Can't create QRCode need up version, current version 41"
RangeError: Invalid array length

40 is the max version as far as I can tell? what is up?