δΈζ | Online use | Update Log | Feedback bug | Gitee | JSBox Demo
- Call a single api to generate and parse the QR code
- Use Promise api, support async/await
- Develop with typescript
- Analyze QR code to support parsing files, base64, url, image
- Support screenshots of video and canvas
- Analyze the QR code to support binding an input element of type file
- 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
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);
})
<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>
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
}
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=>{});
Parse the QR code from the file object
function decodeFromFile(file: File): Promise<string>;
import {decodeFromFile} from'tc-qrcode';
decodeFromFile(file).then(result=>{});
Parse the QR code from the base64 graph
function decodeFromBase64(base64Str: string): Promise<string>;
import {decodeFromBase64} from'tc-qrcode';
decodeFromBase64(base64).then(result=>{});
Parse the QR code from the image object
function decodeFromImage(image: HTMLImageElement): Promise<string>;
import {decodeFromImage} from'tc-qrcode';
decodeFromImage(image).then(result=>{});
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=>{});
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=>{});
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)=>{
});
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
});
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
Get the version number
import qrcode from'tc-qrcode';
qrcode.version;
Expose the coding library aralejs/qrcode
import qrcode from'tc-qrcode';
qrcode.Encoder;
Expose the decoding library cozmo/jsQR
import qrcode from'tc-qrcode';
qrcode.Decoder;