chillerlan/js-qrcode

A javascript port of chillerlan/php-qrcode, a QR Code library based on the implementation by Kazuhiko Arase.

Overview

Features

• Creation of Model 2 QR Codes, Version 1 to 40
• ECC Levels L/M/Q/H supported
• Mixed mode support (encoding modes can be combined within a QR symbol). Supported modes:
  • numeric
  • alphanumeric
  • 8-bit binary
• Flexible, easily extensible output modules, built-in support for the following output formats:
  • Markup types: SVG, etc.
  • String types: JSON, plain text, etc.
  • Raster image types via Canvas

Documentation

The API is very similar to the PHP version of this library, and you can refer to its documentation and examples for most parts.

Key differences:

• Class constants of the PHP version are regular constants here, e.g. QRMatrix::M_DATA becomes M_DATA, Version::AUTO is VERSION_AUTO and EccLevel:L to ECC_L - see index.js for the proper names of all symbols.
• No multimode support for Kanji and Hanzi character sets (handling/converting non-UTF8 strings in javascript is a mess), no ECI support for the same reason.
• save-to-file is not supported. You can re-implement the method QROutputAbstract::saveToFile() in case you need it. It's called internally, but it has no function.
• No QR Code reader included
• The usual javascript quirks:
  • the internal structure of some classes may deviate from their PHP counterparts
  • key-value arrays become objects, causing inconsistent return values in some cases, not to mention the inconsistent loop types for each (pun intended)
  • numbers may act strange
  • magic getters and setters come with downsides, see this comment

An API documentation created with jsdoc can be found at https://chillerlan.github.io/js-qrcode/ (WIP).

Quickstart

Server-side, in nodejs:

import {QRCode} from './dist/js-qrcode-node-src.cjs';

let data   = 'otpauth://totp/test?secret=B3JX4VCVJDVNXNZ5&issuer=chillerlan.net';
let qrcode = (new QRCode()).render(data);

// do stuff
console.log(qrcode);

Client-side, in a webbrowser:

<div id="qrcode-container"></div>
<script type="module">
	import {QRCode} from './dist/js-qrcode-es6-src.js';
	
	// an SVG image as base64 data URI will be returned by default
	let qrcode = (new QRCode()).render('https://www.youtube.com/watch?v=dQw4w9WgXcQ');

	// append it to the DOM
	let img = document.createElement('img');
	img.alt = 'QRCode';
	img.src = qrcode
	
	document.getElementById('qrcode-container').appendChild(img);
</script>

Have a look in the examples folder for some more usage examples.

License notice

Parts of this code are ported to js (via php) from the ZXing project and licensed under the Apache License, Version 2.0.

Trademark Notice

The word "QR Code" is a registered trademark of DENSO WAVE INCORPORATED https://www.qrcode.com/en/faq.html#patentH2Title