ArcherGu / easy-qrcode

An easy qrcode package written by TypeScript

Easy QRcode 📱

An Easy QRcode package written by TypeScript. This package can generate QR codes manually or automatically based on content. Thank you for using it. 😊

🚀Demo

1. Quick start

Install

Install with NPM or Yarn

# npm
npm install --save easy-qrcode
# yarn
yarn add --save easy-qrcode

Or link to the source code directly

<script src="dist/easy-qrcode.min.js"></script>

Name EQ is ready to use and no need to import.

Or CDN

<script src="https://unpkg.com/easy-qrcode/dist/easy-qrcode.min.js"></script>

Name EQ is ready to use and no need to import.

2. How to use

Create

Creator class is used to generate a boolean matrix of QR code, which is a two-dimensional matrix that represents rows and columns. You can use some options to initialize this creator. These options are optional.

import { Creator, ErrorCorrectionLevel, MaskPattern } from 'easy-qrcode';

const qrCreator = new Creator();

// with options
const qrCreator = new Creator({
  version: 4,
  enableECI: false,
  errorCorrectionLevel: ErrorCorrectionLevel.M,
  maskPattern: MaskPattern.PATTERN000,
});

You can add content that will need to be written to the QR code to the creator and then generate the matrix.

import { QRContent, QRMode } from 'easy-qrcode';

// Add content directly
qrCreator.add('123');

// Add QRContent
const myContent = new QRContent('123', QRMode.Byte);
qrCreator.add(myContent);

// Add content object
qrCreator.add({
  content: '123',
  mode: QRMode.Numeric,
});

// create matrix
qrCreator.create();

const matrix = qrCreator.getMatrix();

You can use this matrix to render QR code or to generate image and other operations.

Render

This package provides a basic renderer now that renders QR code onto canvas. You can provide your own renderer for a more free experience.

import { Renderer } from 'easy-qrcode';

const qrRenderer = new Renderer();
const matrix = qrCreator.getMatrix();

// An existing canvas
const canvas = document.getElementById('qr-canvas');
qrRenderer.drawCanvas(matrix, canvas);

// create a new canvas
const canvas = qrRenderer.drawCanvas(matrix);
document.body.append(canvas);

3. Documentation

You can find documentation here.

4. Why

The most direct way to understand a standard or algorithm is to practice it. I was learning some details about QR code, and when I read some documentation I decided to implement a package.

In fact, this package was not created out of thin air. During the creation process I referred to some other developer projects, and I am very grateful for the ideas they provide

• kazuhikoarase/qrcode-generator
• soldair/node-qrcode
• nuintun/qrcode
• gera2ld/qrcanvas

License

The code in this project is licensed under MIT license.