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解决的问题非要交给前端，不过解决思路还是很清晰的，如果有更好的方法，不妨交流交流。

感谢阅读~