wechat-qrcode-ocr-wasm

English | 简体中文

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

initError

[wechat-qrcode-ocr-wasm Initialize failed] consider the following reasons:

• "wasmBinaryFile、wechatQRcodeFile" The file address is incorrect!
• webAssembly
• CORS

Credits

This lib is based on "OpenCV for C++" which Kazuhiko Arase thankfully MIT licensed.

License

MIT