1.1.0 • Published 3 years ago
tc-qrcode v1.1.0
tc-qrcode
1. 特性
- 调用单个api生成和解析二维码
- 使用Promise api, 支持async/await
- 使用 typescript 开发
- 解析二维码支持解析文件,base64,url,image
- 支持video和canvas的截屏
- 解析二维码支持绑定一个type为file的input元素
- 生成二维码支持返回 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;