|
Vue实现长按图片识别图中二维码
思路：要想实现可以识别图片中的二维码，那必定是要将这张图进行上传操作，上传则需要file对象格式。不管是在H5还是APP中，展示的图片都是通过url的方式展示在img标签中的，所以大致的思路就是长按图片，获取图片url，并将url转换成可实现上传操作的file对象格式，再通过某个插件对上传的file进行是否存在QR码的识别判断操作，从而实现了长按识别二维码，思路成立，开始实现。
1. 首先我们需要实现长按某张图片，几百毫秒后执行下一步操作，这一步就包括了获取这张图片url，这一步可以通过@touchstart结合setTimeout实现。
// 标签中
// 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 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解决的问题非要交给前端，不过解决思路还是很清晰的，如果有更好的方法，不妨交流交流。
感谢阅读~
2021-10-29 增加
在开发过程中可能遇到一个小问题，比如当你双指放大图片的时候触发了动作面板，这个其实很好解决，touch接口有原生的判断触摸点数——“touches"或"targetTouches”，它们都是一个列表，大于1就可以禁止动作面板的触发。
|