前端如何识别上传的二维码---jsQR

最新推荐文章于 2024-09-13 21:46:15 发布

一狐九

最新推荐文章于 2024-09-13 21:46:15 发布

阅读量754

点赞数 9

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/zz_LXW/article/details/136743467

版权

文章介绍了如何在HTML页面中利用npm包jsQR和JavaScript实现文件上传，对上传的图片进行二维码识别，并获取识别结果。代码展示了如何创建canvas、读取文件、解码二维码的过程。

摘要由CSDN通过智能技术生成

npm

npm i -d jsqr

html

<el-button @click="$refs.input.click()">识别</el-button>
<input type="file" style="display: none" id="input" @input="upload">

import jsQR from "jsqr";

decodeQRCode(image) {
      //创建画布
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = image.width;
      canvas.height = image.height;
      //把二维码画上去
      context.drawImage(image, 0, 0, canvas.width, canvas.height);
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      //jsQR识别出来
      const decodedResult = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: 'dontInvert',
      });
      if (decodedResult) {
      //返回识别结果
        return decodedResult.data
      } else {
      	window.alert（'未识别到二维码!'）
        return ''
      }
    }
    
upload(){
	let input = document.querySelector('#input')
	const file = input.files[0]
	if (file) {
	      const reader = new FileReader();
	      reader.onload = (e) => {
	        const image = new Image();
	        image.src = e.target.result;
	        image.onload = () => {
	          let code = this.decodeQRCode(image);
	          console.log(code)//识别结果 
	        };
	      };
	      reader.readAsDataURL(file);
	    }
}