vue 二维码+条形码识别
需求及说明:web端 ,识别图片中,二维码和条形码识别信息可能有重叠需要合并后去重二维码和条形码在同一张图片上(编写代码暂无冲突)说明:二维码、条形码分开说明分析二维码://使用npm安装qrcode-decodernpm install qrcode-decoder --registry=https://registry.npm.taobao.org// 引入qrcode-decoder单独js
·
需求及说明:
- web端 ,识别图片中,二维码和条形码
- 识别信息可能有重叠需要合并后去重
- 二维码和条形码在同一张图片上(编写代码暂无冲突)
说明:二维码、条形码分开说明分析
二维码:
//使用npm安装qrcode-decoder
npm install qrcode-decoder --registry=https://registry.npm.taobao.org
// 引入qrcode-decoder 单独js文件或者写在当前使用文件都可(当前文件中需改为函数形式)
import QrCode from 'qrcode-decoder'
// 传入file对象,返回promise
export function getQrUrl(file) {
//使用这个方法或者下面被注释的方法设置浏览器读取文件方式,chrome和ie有效,其他浏览器没测试
const URi = window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file)
const url = URi
// 初始化
const qr = new QrCode()
// 解析二维码,返回promise
return qr.decodeFromImage(url)
}
// 二维码识别 使用时触发的函数
resolveQR(event) {
const result =getQrUrl(event.file)
result.then(res => {
if (res.data) {
console.log(res.data,'二维码内容')
} else {
console.log('识别二维码失败, 请重新上传')
}
}).catch(err => {
console.log(JSON.stringify(err))
})
},
更多推荐
已为社区贡献2条内容
所有评论(0)