tc-qrcode

🚀 Simple and easy-to-use js library for generating and parsing QR codes

中文 | Online use | Update Log | Feedback bug | Gitee

---

1. Features

1. Call a single api to generate and parse the QR code
2. Use Promise api, support async/await
3. Develop with typescript
4. Analyze QR code to support parsing files, base64, url, image
5. Support screenshots of video and canvas
6. Analyze the QR code to support binding an input element of type file
7. Generate QR code to support returning base64 and image

Note: The codec functions of this library are respectively encapsulated from aralejs/qrcode and cozmo/jsQR

2. Quick use

2.1 npm installation

npm i tc-qrcode

import qrcode from'tc-qrcode';

qrcode.decodeFromUrl('https://cdn.jsdelivr.net/gh/theajack/qrcode/helper/demo-qrcode.png')
    .then(result=>{
        console.log(result);
    })

2.2 cdn

<script src="https://cdn.jsdelivr.net/npm/tc-qrcode/tc-qrcode.min.js"></script>
<script>
    TCQrcode.decodeFromUrl('https://cdn.jsdelivr.net/gh/theajack/qrcode/helper/demo-qrcode.png')
        .then(function (result) {
            console.log(result);
        })
</script>

3 api

Please refer to index.d.ts

Note:

The encoded apis all support input parameters of type IEncodeOption. If the input is a string, the following parameters are all passed in the default value. The return value is also wrapped by Promise

interface IEncodeOption {
    text: string;
    width?: number; // default value 256
    height?: number; // default value 256
    typeNumber?: number; // default value 4
    colorDark?: string; // default value'#000000'
    colorLight?: string; // default value'#ffffff'
    correctLevel?: 1 | 0 | 3 | 2; // default value 2
}

3.1 decodeFromUrl

Parse the QR code from the url, which can be an online picture address or blob url

function decodeFromUrl(url: string): Promise<string>;

import {decodeFromUrl} from'tc-qrcode';
decodeFromUrl('xxx').then(result=>{});

3.2 decodeFromFile

Parse the QR code from the file object

function decodeFromFile(file: File): Promise<string>;

import {decodeFromFile} from'tc-qrcode';
decodeFromFile(file).then(result=>{});

3.3 decodeFromBase64

Parse the QR code from the base64 graph

function decodeFromBase64(base64Str: string): Promise<string>;

import {decodeFromBase64} from'tc-qrcode';
decodeFromBase64(base64).then(result=>{});

3.4 decodeFromImage

Parse the QR code from the image object

function decodeFromImage(image: HTMLImageElement): Promise<string>;

import {decodeFromImage} from'tc-qrcode';
decodeFromImage(image).then(result=>{});

3.5 decodeFromVideo

Take a screenshot from the video object and parse the QR code

function decodeFromVideo(video: HTMLVideoElement): Promise<string>;

import {decodeFromVideo} from'tc-qrcode';
decodeFromVideo(video).then(result=>{});

3.6 decodeFromCanvas

Take a screenshot from the canvas object and parse the QR code

function decodeFromCanvas(canvas: HTMLCanvasElement): Promise<string>;

import {decodeFromCanvas} from'tc-qrcode';
decodeFromCanvas(canvas).then(result=>{});

3.7 decodeBindInput

Bind an input element whose type is file as the input source, and continuously parse the QR code

This method does not return a string object, but uses a callback function to receive the return value

function decodeBindInput(input: HTMLInputElement, onResult: (result: string) => void): void;

import {decodeBindInput} from'tc-qrcode';
decodeBindInput(input, (result)=>{

});

3.8 encodeAsBase64

Encode the content as a base64 image

function encodeAsBase64(content: string | IEncodeOption): string;

import {encodeAsBase64} from'tc-qrcode';
const base64 = encodeAsBase64('xxxx');

// or use parameters
const base64 = encodeAsBase64({
    text:'xxx',
    width: 256, // default value 256
    height: 256, // default value 256
    typeNumber: 4; // default value 4
    colorDark:'#000000'; // default value'#000000'
    colorLight:'#ffffff'; // default value'#ffffff'
    correctLevel: 2; // default value 2
});

3.9 encodeAsImage

Generate an image element after encoding the content into base64

function encodeAsImage(content: string | IEncodeOption): HTMLImageElement;

import {encodeAsImage} from'tc-qrcode';
const image = encodeAsImage('xxxx'); // The parameters are consistent with 3.8

3.10 version

Get the version number

import qrcode from'tc-qrcode';

qrcode.version;

3.11 Encoder

Expose the coding library aralejs/qrcode

import qrcode from'tc-qrcode';

qrcode.Encoder;

3.12 Dncoder

Expose the decoding library cozmo/jsQR

import qrcode from'tc-qrcode';

qrcode.Decoder;