前端实现二维码识别wechat-qrcode-ocr-wasm

简介

为了实现拍照上传的二维码识别。在vue项目中引入npm包（需要浏览器支持webassembly）

npm install wechat-qrcode-ocr-wasm

安装后拷贝 /node_modules/wechat-qrcode-ocr-wasm/static/wasm/下的
onlyWechatWasmFile.data
wechatQRcodeFile.data
到自己的静态目录下。我的静态目录是public：

package.json
src
public
├── favicon.ico
└── static└── wasm├── onlyWechatWasmFile.data└── wechatQRcodeFile.data

然后通过http:/localhost:8080/static/wasm/onlyWechatWasmFile.data可以访问。

import { getImgQRCodeInfo } from "wechat-qrcode-ocr-wasm";
function getCode(url) { // Promise<response>return getImgQRCodeInfo({wasmBinaryFile: "/static/wasm/onlyWechatWasmFile.data", // http://localhost:8080/static/wasm/onlyWechatWasmFile.datawechatQRcodeFile: "/static/wasm/wechatQRcodeFile.data", // http://localhost:8080/static/wasm/wechatQRcodeFile.dataurl, // image url or base64loadStatus: ({ loaded, total }) => { // /static/wasm/ 下的文件加载进度console.log(`总的：${total}  已加载：${loaded} `);},withCredentials: true, // 开启cookieheaders: {}, // 配置请求头imgOnError: (e) => { // 图片加载失败},initError: (e) => { // 二维码识别初始化失败}});
}
img = "你的图片地址或者图片base64"
getCode(img).then((res) => {console.log("二维码内容：", res.data);console.log("二维码所在图片中的坐标：", res.points);
});

参考

在线示例: https://example.io/index.html
https://www.npmjs.com/package/wechat-qrcode-ocr-wasm

前端实现二维码识别wechat-qrcode-ocr-wasm相关推荐

Opencv4.5.1 微信二维码识别功能 QRCode 编译与使用 C++
日常生活中手机摄像头最常用的功能可能就是扫码了,而且大部分使用微信扫码,微信扫码的功能的确很强大,精度高.速度快.微信扫码近来加入了opencv开源项目了.现特地进行了尝试,并记录了整个过程,以上动图 ...
前端学习--实现二维码识别功能
概述: 最近所做的毕设项目正好与之前很火的共享单车相关,共享单车应用中很关键的一个部分就是扫码用车,但我之前没有做过相关的模块,在参考网上相关实现的教程时发现,基本上所有的二维码识别模块都是通过客户端 ...
python 调用qrcode库实现二维码识别
python 实现二维码识别ScanQRcode.py """ 生成二维码保存及对二维码解码输出运行需要安装相应库 """ import ...
前端生成二维码qrcode.js，并下载
利用qrcode.js在前端生成二维码,并下载一.引入js包 <script type="text/javascript" src="//static.runoo ...
QRCode - 二维码识别与生成
来源:Yi'mouleng(@丶伊眸冷) 链接:http://t.cn/R40WxcM 前言有关二维码的介绍,我这里不做过多说明, 可以直接去基维百科查看,附上链接QR code(https://e ...
前端html实现二维码识别
一.html代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><met ...
OpenCV（项目）二维码识别（二维码、条形码）
目录过程 1.获取图片中的二维码信息 2.获取视频中的二维码信息 3.检测出二维码框 4.显示数据 5.添加数据,判断二维码是否授权 5-1:.添加数据 5-2.读取文件信息,放入数组 5-3.判断 ...
Atitit java 二维码识别图片识别
Atitit java 二维码识别图片识别 1.1. 解码1 1.2. 首先,我们先说一下二维码一共有40个尺寸.官方叫版本Version.1 1.3. 二维码的样例:2 1.4. 定位图案2 1. ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...

前端实现二维码识别wechat-qrcode-ocr-wasm

简介

参考

前端实现二维码识别wechat-qrcode-ocr-wasm相关推荐

最新文章

热门文章