vue实现二维码识别功能读取二维码内容

我们可以访问 https://www.wwei.cn/?from=bdtp
在输入框中输入文本然后点击生成二维码

他就会给我生成一个对应信息的二维码图片我们可以复制到本地

打开vue项目
先引入依赖

npm install canvas jsqr

然后组件编写代码如下

<template><div><input type="file" accept="image/*" @change="onFileChange"><canvas class = "canvas" ref="canvas"></canvas>{{ com }}</div>
</template><script>
import jsQR from 'jsqr'export default {name: 'ScanQRCode',data(){return {com: ""}},methods: {async onFileChange(e) {const file = event.target.files[0]const reader = new FileReader()reader.onload = () => {const img = new Image()img.onload = () => {const canvas = this.$refs.canvas;const context = canvas.getContext('2d')context.drawImage(img, 0, 0, canvas.width, canvas.height)const imageData = context.getImageData(0, 0, canvas.width, canvas.height)const code = jsQR(imageData.data, imageData.width, imageData.height)if (code) {this.com = code.data;} else {this.com = "无法识别";}}img.src = reader.result;}reader.readAsDataURL(file);},parseQrCode(imageUrl) {return new Promise((resolve, reject) => {const qr = new QrCode();const img = new Image();img.onload = () => {qr.callback = (err, result) => {if (err) {debuggerreject(err);} else {resolve(result);}};qr.decode(img);};img.src = imageUrl;});}},mounted() {if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {const video = document.createElement('video');video.srcObject = stream;video.play();const canvas = this.$refs.canvas;const ctx = canvas.getContext('2d');const qr = new QrCode();const scan = () => {if (video.paused || video.ended || video.readyState < 2) {setTimeout(scan, 100);return;}canvas.width = video.videoWidth;canvas.height = video.videoHeight;ctx.drawImage(video, 0, 0);try {qr.decode(canvas.toDataURL());} catch (err) {}setTimeout(scan, 100);};scan();});}}
}
</script><style scoped>
.canvas{display: none;
}
</style>

然后我们打开PC端网页访问点击选择文件
他就会让我在文件夹中选择我们选一个二维码

我们定制的内容也是被识别了出来

当我用手机点击选择文件

他会问我们拍照还是从相册中去找
我们点击拍照
用相机把二维码拍给他注意一定要清晰一点不然识别不出来

这样我们的二维码也是成功在手机端也识别了出来

vue实现二维码识别功能读取二维码内容相关推荐

使用python开发二维码识别功能、Docker镜像安装opencv-contrib-python、
使用python开发二维码识别功能.Docker镜像安装opencv-contrib-python. 背景开发二维码识别功能,使用到开源三方库opencv-contrib-python. 在使用do ...
android 图片二维码识别和保存(二)
续上一篇,开发图片二维码识别功能后,我们对功能进行性能分析内存占用显著提高了,不使用该功能内存占用大约是147M,使用这个功能多次以后,高达203M. 因此对功能进行研究,发现每次生成的图片没有即时的 ...
java毕业生设计疫苗药品批量扫码识别追溯系统计算机源码+系统+mysql+调试部署+lw
java毕业生设计疫苗药品批量扫码识别追溯系统计算机源码+系统+mysql+调试部署+lw java毕业生设计疫苗药品批量扫码识别追溯系统计算机源码+系统+mysql+调试部署+lw 本源码技术栈: ...
计算机毕业设计Java疫苗药品批量扫码识别追溯系统(系统+源码+mysql数据库+Lw文档）
计算机毕业设计Java疫苗药品批量扫码识别追溯系统(系统+源码+mysql数据库+Lw文档) 计算机毕业设计Java疫苗药品批量扫码识别追溯系统(系统+源码+mysql数据库+Lw文档) 本源码技术栈 ...
基于STC89C52RC芯片设计的一款酒店服务机器人（包含货物检测、二维码识别功能）
目录一:硬件设备 1:主控 2:扫码模块 3:货物检测 4:循迹模块 5:电机驱动模块 6:电源二:软件代码三:循迹环PID 四:成品视频一:硬件设备 1:主控所选取主控芯片为STC89C5 ...
Opencv4.5.1 微信二维码识别功能 QRCode 编译与使用 C++
日常生活中手机摄像头最常用的功能可能就是扫码了,而且大部分使用微信扫码,微信扫码的功能的确很强大,精度高.速度快.微信扫码近来加入了opencv开源项目了.现特地进行了尝试,并记录了整个过程,以上动图 ...
前端学习--实现二维码识别功能
概述: 最近所做的毕设项目正好与之前很火的共享单车相关,共享单车应用中很关键的一个部分就是扫码用车,但我之前没有做过相关的模块,在参考网上相关实现的教程时发现,基本上所有的二维码识别模块都是通过客户端 ...
【二维码识别】灰度+二值化+校正二维码生成与识别【含GUI Matlab源码 635期】
⛄一.二维码生成与识别简介如今,移动互联网技术日新月异,随着5G时代的来临,广泛应用于数据处理过程中的二维码信息安全日益成为人们越来越关注的问题.以QR码为代表的二维码,以其在信息存储.传输和识别技 ...
Halcon二维码识别，多二维码识别，附代码及常见算子解释
前言二维码作为机器视觉常见的检测场景,常常用于产品类型检测,MES系统对接等场景,不同于常见的halcon图像处理流程,二维码识别不需要做图像分割便可以很快的完成二维码区域定位与二维码检测.这里对常 ...

vue实现二维码识别功能读取二维码内容

vue实现二维码识别功能读取二维码内容相关推荐

最新文章

热门文章

vue实现二维码识别功能 读取二维码内容

vue实现二维码识别功能 读取二维码内容相关推荐

最新文章

热门文章

vue实现二维码识别功能读取二维码内容

vue实现二维码识别功能读取二维码内容相关推荐