Vue实现长按图片识别图中二维码

Vue实现长按图片识别图中二维码

思路:要想实现可以识别图片中的二维码,那必定是要将这张图进行上传操作,上传则需要file对象格式。不管是在H5还是APP中,展示的图片都是通过url的方式展示在img标签中的,所以大致的思路就是长按图片,获取图片url,并将url转换成可实现上传操作的file对象格式,再通过某个插件对上传的file进行是否存在QR码的识别判断操作,从而实现了长按识别二维码,思路成立,开始实现。

1. 首先我们需要实现长按某张图片,几百毫秒后执行下一步操作,这一步就包括了获取这张图片url,这一步可以通过@touchstart结合setTimeout实现。

// 标签中
<div class="image-preview" @touchstart="holdDown"></div>
// js中
holdDown (e) {
   setTimeout(() => {
		// 这是通过长按获取到了html标签,下面这个if语句就是为了识别是否是img标签,通过e.target.nodeName获取
		if(e.target.nodeName === ‘IMG‘){
			// 这里可以做很多事,比如vant组件的动作面板,或是对话框等等,方便识别二维码成功后的后续操作,例如点击识别二维码,这个是你自己定的。	
			this.showSheet = true
			// 提前通过e.target.currentSrc获取到图片的src,也就是图片的url地址,并把它存起来。
			this.imgUrl = e.target.currentSrc
      // 拿到url后,我们就需要将图片的url地址转化成file对象格式,也就是俗称的文件格式。这里我们最好封装一个方法,传入url,通过返回值获取到它的值。
      this.urlToFile(url)
      // 未完 继续往下看
		}
	},500)
}

2. 我们需要封装一个可以将url的图片地址转换成可上传的file对象格式,这里就是整个实现代码的核心。

urlToFile (url, callback) { // 建议封装,全局使用
  const image = new Image() // 初始化一个image图像
  image.crossOrigin = ‘*‘ // 这个是为了解决图片的跨域问题,有些时候不生效,则需要后端配置
  image.src = url 
  image.onload = function () { // 当然在图片加载完成后去执行以下代码
    const canvas = document.createElement(‘canvas‘) // 将image图像转化成canvas图像
    canvas.width = image.width // canvas长宽与image保持一致
    canvas.height = image.height 
    const ctx = canvas.getContext(‘2d‘)
    ctx.drawImage(image, 0, 0, image.width, image.height)
    const ext = image.src.substring(image.src.lastIndexOf(‘.‘) + 1).toLowerCase()
    const dataURL = canvas.toDataURL(‘image/‘ + ext) // 如果你的图片格式是固定的,如jpg、png,则可以直接替换这里的ext,直接写成例如image/png。
    const type = ‘image/‘ + ext
    const bytes = window.atob(dataURL.split(‘,‘)[1]) // 去掉url的头,并转换为byte
    const ab = new ArrayBuffer(bytes.length) //初始化一个bytes的二进制数组ArrayBuffer
    const ia = new Uint8Array(ab) // 初始化,ab转为Uint8Array数组类型
    for (let i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i)
    }
    const tempBlob = new Blob([ia], { type: type }) // 关键,初始化一个blob对象,blob支持文件操作
    const blob = tempBlob
    var file = new File([blob], ‘filename‘, { type: type, lastModified: Date.now() })// 通过blob创建一个file文件
    callback(file) // 为何用callback 而不是return?因为上面的onload中是闭包,我们无法直接return这个file
  }
}

3. 还记得之前传入url的那个方法吗?我们回到长按方法holdDown方法中,再获取callback的file值。

holdDown (e) {
   setTimeout(() => {
     .
     . // 省略部分代码
     .
     this.urlToFile(url, (file) => { // 通过箭头函数拿到callback返回的值
       console.log(file) //至此 你已经成功拿到url转file的图片文件,下一步就是上传,并扫描二维码
     })
   
		}
	},500)
}

4. 市面上扫描图片文件二维码的插件并不多,甚至有大神手写了一个reqrcode.js,但不适用于vue。这里我推荐qrcode-decoder插件,他可以通过传入的file实现对图片文件的扫描,识别是否存在二维码,并获取到二维码的内容。

下载方式:
// npm 安装
npm install qrcode-decoder
// 太慢了?淘宝镜像安装
npm install qrcode-decoder --registry=https://registry.npm.taobao.org

5. qrcode-decoder的使用方法

import QrCode from ‘qrcode-decoder‘
// 引入后,创建一个方法,用于识别图片二维码,当然你可以将这个方法封装起来,全局注册,便于使用。
identifyQR (file) {
      // 获取临时路径 chrome有效,其他浏览器的方法请自行查找
      const url = window.webkitURL.createObjectURL(file)
      console.log(url)
      // 初始化
      const qr = new QrCode()
      // 解析二维码,返回promise
      return qr.decodeFromImage(url) //注意 这里返回的是一个promise对象
}

6. 再回到我们获取到file处,使用这个方法,并进行后续操作

holdDown (e) {
   setTimeout(() => {
     .
     . // 省略部分代码
     .
     this.urlToFile(url, (file) => { // 通过箭头函数拿到callback返回的值
       this.identifyQR(file).then(r => { // 返回值为promise对象,所以通过.then获取
         if(r.data){// 其中写你的操作,若有值,则说明是存在二维码的,可以先存起来获取到的二维码的值,便于其他地方操作及使用
           ...
         }else{
           console.log(‘不是二维码‘)
         }
       })
     })
		}
	},500)
}

至此,成功实现了长按识别二维码

总结:方法是自己摸索的,明明可以app解决的问题非要交给前端,不过解决思路还是很清晰的,如果有更好的方法,不妨交流交流。

感谢阅读~

Vue实现长按图片识别图中二维码

上一篇:动态规划


下一篇:集群数据均衡