js生成二维码，js 解析二维码，jsqrcode，js从url生成二维码

由于现有的生成解析二维码的库使用较为复杂，于是本人封装了一层，希望达到解码时传入一个图片url或者file对象，直接返回内容。编码时传入内容直接返回image对象或者base64，于是有了这个项目

以下是github地址及文档

 tc-qrcode 简单好用的生成和解析二维码的js库

英文 | 在线使用 | 更新日志 | 反馈 | Gitee

---

1. 特性

1. 调用单个api生成和解析二维码
2. 使用Promise api， 支持async/await
3. 使用 typescript 开发
4. 解析二维码支持解析文件，base64，url，image
5. 支持video和canvas的截屏
6. 解析二维码支持绑定一个type为file的input元素
7. 生成二维码支持返回 base64 and image

注：该库编解码功能分别封装自 aralejs/qrcode 和 cozmo/jsQR

2. 快速使用

2.1 npm 安装

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

请参考 index.d.ts

注:

编码的api都支持类型为 IEncodeOption 输入参数，如果传入的是字符串，则以下参数都传入默认值. 返回值也都是经过Promise 包裹的

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

3.1 decodeFromUrl

从url中解析二维码，可以是一个在线的图片地址或者blob url

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

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

3.2 decodeFromFile

从file对象中解析二维码

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

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

3.3 decodeFromBase64

从base64的图中解析二维码

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

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

3.4 decodeFromImage

从image对象中解析二维码

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

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

3.5 decodeFromVideo

从video对象中截图并解析二维码

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

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

3.6 decodeFromCanvas

从canvas对象中截图并解析二维码

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

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

3.7 decodeBindInput

绑定一个type为file的input元素作为输入源，持续的解析二维码

这个方法不会返回 string 对象，而是使用一个回调函数来接收返回值

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

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

});

3.8 encodeAsBase64

将内容编码为base64的图片

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

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

// 或使用参数
const base64 = encodeAsBase64({
    text: 'xxx',
    width: 256, // 默认值 256
    height: 256, // 默认值 256
    typeNumber: 4; // 默认值 4
    colorDark: '#000000'; // 默认值 '#000000'
    colorLight: '#ffffff'; // 默认值 '#ffffff'
    correctLevel: 2; // 默认值 2
});

3.9 encodeAsImage

将内容编码为base64之后生成一个image元素

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

import {encodeAsImage} from 'tc-qrcode';
const image = encodeAsImage('xxxx'); // 参数与3.8一致

3.10 version

获取版本号

import qrcode from 'tc-qrcode';

qrcode.version;

3.11 Encoder

暴露出编码使用库 aralejs/qrcode

import qrcode from 'tc-qrcode';

qrcode.Encoder;

3.12 Dncoder

暴露出解码使用库 cozmo/jsQR

import qrcode from 'tc-qrcode';

qrcode.Decoder;