https://github.com/theajack/qrcode
🚀 Powerful qrcode js lib
https://github.com/theajack/qrcode
qrcode typescript
Last synced: 21 days ago
JSON representation
🚀 Powerful qrcode js lib
- Host: GitHub
- URL: https://github.com/theajack/qrcode
- Owner: theajack
- License: mit
- Created: 2020-04-04T10:05:10.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-06T06:23:30.000Z (almost 3 years ago)
- Last Synced: 2025-03-28T00:44:08.561Z (about 1 month ago)
- Topics: qrcode, typescript
- Language: TypeScript
- Homepage: https://theajack.github.io/qrcode
- Size: 368 KB
- Stars: 15
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.cn.md
- License: LICENSE
Awesome Lists containing this project
README
# [tc-qrcode](https://www.github.com/theajack/qrcode)
🚀 简单好用的生成和解析二维码的js库
**[英文](https://github.com/theajack/qrcode/blob/master/README.md) | [在线使用](https://theajack.github.io/qrcode) | [更新日志](https://github.com/theajack/qrcode/blob/master/helper/version.md) | [反馈](https://github.com/theajack/qrcode/issues/new) | [Gitee](https://gitee.com/theajack/qrcode/) | [JSBox Demo](https://theajack.github.io/jsbox?github=theajack.qrcode)**
---
### 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](https://github.com/aralejs/qrcode/) 和 [cozmo/jsQR](https://github.com/cozmo/jsQR)
### 2. 快速使用
#### 2.1 npm 安装
```
npm i tc-qrcode
```
```js
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
```html
TCQrcode.decodeFromUrl('https://cdn.jsdelivr.net/gh/theajack/qrcode/helper/demo-qrcode.png')
.then(function (result) {
console.log(result);
})
```
### 3 api
请参考 [index.d.ts](https://github.com/theajack/qrcode/blob/master/src/index.d.ts)
注:
编码的api都支持类型为 IEncodeOption 输入参数，如果传入的是字符串，则以下参数都传入默认值. 返回值也都是经过Promise 包裹的
```ts
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
```ts
function decodeFromUrl(url: string): Promise;
```
```js
import {decodeFromUrl} from 'tc-qrcode';
decodeFromUrl('xxx').then(result=>{});
```
#### 3.2 decodeFromFile
从file对象中解析二维码
```ts
function decodeFromFile(file: File): Promise;
```
```js
import {decodeFromFile} from 'tc-qrcode';
decodeFromFile(file).then(result=>{});
```
#### 3.3 decodeFromBase64
从base64的图中解析二维码
```ts
function decodeFromBase64(base64Str: string): Promise;
```
```js
import {decodeFromBase64} from 'tc-qrcode';
decodeFromBase64(base64).then(result=>{});
```
#### 3.4 decodeFromImage
从image对象中解析二维码
```ts
function decodeFromImage(image: HTMLImageElement): Promise;
```
```js
import {decodeFromImage} from 'tc-qrcode';
decodeFromImage(image).then(result=>{});
```
#### 3.5 decodeFromVideo
从video对象中截图并解析二维码
```ts
function decodeFromVideo(video: HTMLVideoElement): Promise;
```
```js
import {decodeFromVideo} from 'tc-qrcode';
decodeFromVideo(video).then(result=>{});
```
#### 3.6 decodeFromCanvas
从canvas对象中截图并解析二维码
```ts
function decodeFromCanvas(canvas: HTMLCanvasElement): Promise;
```
```js
import {decodeFromCanvas} from 'tc-qrcode';
decodeFromCanvas(canvas).then(result=>{});
```
#### 3.7 decodeBindInput
绑定一个type为file的input元素作为输入源，持续的解析二维码
这个方法不会返回 string 对象，而是使用一个回调函数来接收返回值
```ts
function decodeBindInput(input: HTMLInputElement, onResult: (result: string) => void): void;
```
```js
import {decodeBindInput} from 'tc-qrcode';
decodeBindInput(input, (result)=>{
});
```
#### 3.8 encodeAsBase64
将内容编码为base64的图片
```ts
function encodeAsBase64(content: string | IEncodeOption): string;
```
```js
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元素
```ts
function encodeAsImage(content: string | IEncodeOption): HTMLImageElement;
```
```js
import {encodeAsImage} from 'tc-qrcode';
const image = encodeAsImage('xxxx'); // 参数与3.8一致
```
#### 3.10 version
获取版本号
```js
import qrcode from 'tc-qrcode';
qrcode.version;
```
#### 3.11 Encoder
暴露出编码使用库 [aralejs/qrcode](https://github.com/aralejs/qrcode/)
```js
import qrcode from 'tc-qrcode';
qrcode.Encoder;
```
#### 3.12 Dncoder
暴露出解码使用库 [cozmo/jsQR](https://github.com/cozmo/jsQR)
```js
import qrcode from 'tc-qrcode';
qrcode.Decoder;
```