因为项目需要获取美团的团购券码核销功能 所以需要解析二维码图片
下面需要用到这个工具“qrcode-decoder”
先安装这个工具依赖
npm i qrcode-decoder
然后引入
import QrCode from 'qrcode-decoder'
在需要解析的函数内,使用工具
decodeQrCode(file) {
var that = this;
var url = null;
if (window.createObjectURL != undefined) {
// basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
// console.log(url)
const qr = new QrCode()
qr.decodeFromImage(url).then(res=>{
// console.log(res.data)
Notify({ type: "danger", message: "券码识别成功" });
that.couponCode = res.data;
}).catch(err=>{
setTimeout(() => {
that.$toast({
overlay: true,
message: "券码识别失败,请重新上传",
duration: 2000,
});
that.couponCode = "";
}, 2000);
})
},
file是二维码图片文件 我这里是用vant的Uploader上传组件获取到的 用别的ui组件也是一样的逻辑
qr.decodeFromImage返回的res.data就是解析结果