1、下载 jsqr 和 qrcode-reader
npm i jsqr qrcode-reader
2、使用
<template>
<div>
<input type="file" accept="image/*" @change="onFileChange">
<canvas class = "canvas" ref="canvas"></canvas>
{{com}}
</div>
</template>
<script>
import jsQR from 'jsqr'
import QrCode from 'qrcode-reader'
export default {
name: 'ScanQRCode',
data(){
return {
com: ""
}
},
methods: {
jump() {
window.open(this.com)
},
async onFileChange(e) {
const file = e.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;
this.jump()
} 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) {
debugger
reject(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>
3、选择文件中保存好的二维码上传
二维码生成网址 草料二维码生成器