https://github.com/kciter/qart.js

Generate artistic QR code. 🎨
https://github.com/kciter/qart.js

javascript qart qr-codes qrcode

Last synced: about 2 months ago
JSON representation

Generate artistic QR code. 🎨

• Host: GitHub
• URL: https://github.com/kciter/qart.js
• Owner: kciter
• License: gpl-3.0
• Created: 2017-01-25T12:10:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-09-02T10:50:29.000Z (about 1 year ago)
• Last Synced: 2024-07-19T10:14:32.460Z (2 months ago)
• Topics: javascript, qart, qr-codes, qrcode
• Language: JavaScript
• Homepage: https://kciter.github.io/qart.js/
• Size: 3.03 MB
• Stars: 3,154
• Watchers: 76
• Forks: 175
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - qart.js

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

```html

```

## Usage

### In the browser

```html

  // 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)

  	});

```

### With ES6

```js

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](https://github.com/BatuhanK/react-qart)

### With Angular.JS

There is a directive available for using qart.js in Angular.js: [angular-qart](https://github.com/isonet/angular-qart)

### With Vue 2.x

There is a directive available for using qart.js in Vue.js 2.x : [vue-qart](https://github.com/superman66/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](https://github.com/kazuhikoarase/qrcode-generator/tree/master/js)

## Inspire

* [CuteR](https://github.com/chinuno-usami/CuteR)

## TODO

* [ ] Server-Side Rendering.

* [ ] CLI Command.

## Donate

If you like this open source, you can sponsor it. :smile:

## LICENSE

[GPLv3](LICENSE)