Wechat-qrcode-ocr-wasm NPM

wechat-qrcode-ocr-wasm

Quick Overview

It only works on client, because it need WebAssembly + Canvas;
https://example.io/index.html

Installation

yarn add wechat-qrcode-ocr-wasm

npm install wechat-qrcode-ocr-wasm

pnpm install wechat-qrcode-ocr-wasm

Basic usage

Vue or React:

copy /node_modules/wechat-qrcode-ocr-wasm/static/wasm/* to your static folder：

  ├── package.json
  ├── pnpm-lock.yaml
  ├── public
  │   ├── favicon.ico
  │   └── static
+ │       └── wasm
+ │           ├── onlyWechatWasmFile.data
+ │           └── wechatQRcodeFile.data
  ├── src

import { getImgQRCodeInfo } from "wechat-qrcode-ocr-wasm";

import img from "../assets/img/0.webp";

function getCode(url: string) { // Promise<response>
  return getImgQRCodeInfo({
    wasmBinaryFile: "/static/wasm/onlyWechatWasmFile.data", // http://localhost:8080/static/wasm/onlyWechatWasmFile.data
    wechatQRcodeFile: "/static/wasm/wechatQRcodeFile.data", // http://localhost:8080/static/wasm/wechatQRcodeFile.data
    url, // image url or base64
    loadStatus: ({ loaded, total }) => {
      console.log(`Downloading data...[${loaded}/${total}]`);
    },
  });
}

getCode(img).then((res) => {
  console.log(res); // { data: ["xxxxx"], points: [[483.32, 884.18, 1444.00, 884.18, 1444.00, 1790.69, 483.32, 1790.69]] }
});


const input = document.getElementById("input");
if (input) {
  input.onchange = (e) => {
    const file = e.target.files[0];
    const url = URL.createObjectURL(
      new Blob([e.target.files[0]], { type: file.type })
    );
    getCode(url).then((res) => {
      console.log(res); // { data: ["xxxxx"], points: [[483.32, 884.18, 1444.00, 884.18, 1444.00, 1790.69, 483.32, 1790.69]] }
    });
  };
}

html

<!-- import JavaScript -->
<script src="https://unpkg.com/wechat-qrcode-ocr-wasm/index.js"></script>
<script>
function getCode(url: string) { // Promise<response>
  return getImgQRCodeInfo({
    wasmBinaryFile: "https://unpkg.com/wechat-qrcode-ocr-wasm/static/wasm/onlyWechatWasmFile.data",
    wechatQRcodeFile: "https://unpkg.com/wechat-qrcode-ocr-wasm/static/wasm/wechatQRcodeFile.data",
    url,
    loadStatus: ({ loaded, total }) => {
      console.log(`Downloading data...[${loaded}/${total}]`);
    },
  });
}
let imgURL = `xxxxx`; // img url or img base64
getCode(imgURL).then((res) => {
  console.log(res); // { data: ["xxxxx"], points: [[483.32, 884.18, 1444.00, 884.18, 1444.00, 1790.69, 483.32, 1790.69]] }
});
</script>

API

1、getImgQRCodeInfo(options)

options: |Property|Type|Default Value| |-------------------|------------|------------| |url|string|""| |wasmBinaryFile?|string|"/static/wasm/onlyWechatWasmFile.data"| |wechatQRcodeFile?|string|"/static/wasm/wechatQRcodeFile.data"| |loadStatus?|(response: { loaded: number; total: number }) => void;|null| |withCredentials?| XMLHttpRequest.withCredentials |false| |headers?|XMLHttpRequest Headers| {}| |imgOnError?|OnErrorEventHandlerNonNull|null| |initError?|ErrorCallback|null|