Vue2实现长按图片识别二维码

思路：要想实现可以识别图片中的二维码，那必定是要将这张图进行上传操作，上传则需要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/' + extconst bytes = window.atob(dataURL.split(',')[1]) // 去掉url的头，并转换为byteconst ab = new ArrayBuffer(bytes.length) //初始化一个bytes的二进制数组ArrayBufferconst 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 = tempBlobvar 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()// 解析二维码，返回promisereturn 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解决的问题非要交给前端，不过解决思路还是很清晰的，如果有更好的方法，不妨交流交流。
感谢阅读~

Vue2实现长按图片识别二维码相关推荐

uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...
webview长按图片识别二维码
webview长按图片识别二维码第一次写博客,主要是做这个功能是临时让加的功能,当时一头雾水,就想着用zxing,但是具体怎么做也不太清楚,然后就查了很多资料,所以在此记录一下. 导入zxing包 ...
微信小程序：长按图片识别二维码
方法一:使用小程序提供的image组件,image组件上有一个show-menu-by-longpress的属性,设置为true,当image被长按时会弹出选择菜单 <image show-me ...
微信iOS长按无法识别二维码
真的是无力吐槽微信的坑真的多把人能呕死,做了个公众号开发一大堆的坑希望你看完每个字分享一下ios微信长按无法识别二维码的问题在网上找了一大堆的处理方式说增加img 的padding.设置缩放的. ...
图片识别二维码，二维码的黑白格线是怎么组合的？
图片识别二维码,同一信息多次生成二维码,生成的二维码的构造是一样的吗? 近十年来,我国电子信息技术飞速发展,在这个通信技术高速发展的时代,产生的众多产品对我们的生活产生了重大的影响,它们让我们的生活变 ...
HTML中，苹果手机长按图片或二维码会跳动
HTML中,苹果手机长按图片或二维码会跳动在img标签添加以下属性即可: draggable="false"
微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
使用JS调用手机本地摄像头或者相册图片识别二维码/条形码
接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...
通过二维码图片识别二维码内容方法
示例代码功能见-识别二维码工具反解析二维码工具识别条码工具反解析条码工具http://sberwm.gsjlw.com/ 可以通过读取图片中的信息,来逆向识别二维码的内容, 主要使用了ZBarC ...
python 图片识别二维码_教你用Python实现实时二维码识别
鸽了好久,最近准备要更新了,想了很久将来可能会固定化的更新内容,会照顾我各种读者,比如这个Python一小时栏目,我让你在一个小时内实现一个有趣有用的小玩意,适合Python初学者或者编程兴趣者来食用 ...

Vue2实现长按图片识别二维码

Vue2实现长按图片识别二维码相关推荐

最新文章

热门文章