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

npm

npm i -d jsqr

html

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

js

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);}
}