https://github.com/gera2ld/qrcanvas
Generate characteristic qrcodes with a canvas.
https://github.com/gera2ld/qrcanvas
Last synced: about 1 year ago
JSON representation
Generate characteristic qrcodes with a canvas.
- Host: GitHub
- URL: https://github.com/gera2ld/qrcanvas
- Owner: gera2ld
- License: mit
- Created: 2016-11-22T16:20:06.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-10-04T02:34:54.000Z (almost 2 years ago)
- Last Synced: 2025-05-11T11:07:01.013Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://gera2ld.github.io/qrcanvas/
- Size: 221 KB
- Stars: 407
- Watchers: 13
- Forks: 64
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# QRCanvas
This is a QRCode generator written in pure javascript.
Based on [Kazuhiko Arase's QRCode](http://www.d-project.com/).
The only requirement is that the browser works with a `canvas`,
which is supported by most modern browsers.
## Usage
### With bundlers
Install as a dependency:
```sh
$ yarn add qrcanvas
# or
$ npm install qrcanvas -S
```
Use as a module:
``` js
import { qrcanvas } from 'qrcanvas';
const canvas = qrcanvas({
data: 'hello, world'
});
document.body.appendChild(canvas);
```
### Browser
Load from CDN:
``` html
```
The module is mounted to a global variable named `qrcanvas`:
``` js
const canvas = qrcanvas.qrcanvas({
data: 'hello, world'
});
document.getElementById('qrcode').appendChild(canvas);
```
### Node.js
[node-canvas](https://github.com/Automattic/node-canvas) is required in Node.js.
Install dependencies:
```sh
$ yarn add qrcanvas canvas
```
``` js
const fs = require('fs');
const { qrcanvas, setCanvasModule } = require('qrcanvas');
// Enable node-canvas
setCanvasModule(require('canvas'));
const canvas = qrcanvas({
data: 'hello, world'
});
// canvas is an instance of `node-canvas`
canvas.pngStream().pipe(fs.createWriteStream('qrcode.png'));
```
## Documents
- [Demo](https://gera2ld.github.io/qrcanvas/)
- [Docs](https://gera2ld.github.io/qrcanvas/docs/)
- [Examples](https://gera2ld.github.io/qrcanvas/examples/)
## Related
- [qrcanvas-vue](https://github.com/gera2ld/qrcanvas-vue)
- [qrcanvas-react](https://github.com/gera2ld/qrcanvas-react)
## Snapshots
