npm은 jsqr을 설치합니다.
<template>
<div>
<button type="primary" @click="handUpload">上传图片</button>
<div style="display: none;">
<input type="file" accept="image/png, image/jpeg" ref="fileInput" @change="changeFile" />
<img id="myimg">
<canvas id="mycanvas"></canvas>
</div>
</div>
</template>
import jsQR from "jsqr"
handUpload() {
this.$refs['fileInput'].click()
},
// 解析二维码中的文本、上传图片是否是二维码
changeFile(e) {
let fileReader = new FileReader();
fileReader.onload = function(event) {
let data = event.target.result;
let img = document.getElementById("myimg");
img.src = data;
img.onload = function() {
let mycanvas = document.getElementById("mycanvas");
let ctx = mycanvas.getContext("2d");
// canvas 的width/height重新设置的时候会清空画布
mycanvas.width = img.width;
mycanvas.height = img.height;
ctx.drawImage(img, 0, 0);
let imageData = ctx.getImageData(0, 0, img.width, img.height);
const code = jsQR(imageData.data, imageData.width, imageData.height);
if(code) console.log("解析出来的文本:", code.data)
else console.log("%c上传图片未识别到二维码", "color: #f00;")
}
}
fileReader.readAsDataURL(e.target.files[0]);
},
참고: QR 코드의 중앙이 WeChat 아이콘인 경우 스캔되지 않습니다.