vue 二维码+条形码识别

 

需求及说明：

1. web端 ，识别图片中，二维码和条形码
2. 识别信息可能有重叠需要合并后去重
3. 二维码和条形码在同一张图片上（编写代码暂无冲突）

说明：二维码、条形码分开说明分析

二维码：

//使用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))
	      })
	},