需求及说明:

  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))
	      })
	},

 

Logo

前往低代码交流专区

更多推荐