QRCanvas

This is a QRCode generator written in pure javascript.

Based on Kazuhiko Arase's QRCode.

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:

$ yarn add qrcanvas
# or 
$ npm install qrcanvas -S

Use as a module:

import { qrcanvas } from 'qrcanvas';
 
const canvas = qrcanvas({
  data: 'hello, world'
});
document.body.appendChild(canvas);

Browser

Load from CDN:

<div id="qrcode"></div>
 
<script src="https://cdn.jsdelivr.net/npm/qrcanvas@3"></script>

The module is mounted to a global variable named qrcanvas:

const canvas = qrcanvas.qrcanvas({
  data: 'hello, world'
});
document.getElementById('qrcode').appendChild(canvas);

Node.js

node-canvas is required in Node.js.

Install dependencies:

$ yarn add qrcanvas canvas

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

• Docs
• Demo
• Examples

Related

• qrcanvas-vue
• qrcanvas-react

Snapshots