"dependencies": {
"core-js": "^3.6.5",
"jimp": "^0.16.1",
"jsqr": "^1.3.1",
"vue-qr": "^2.3.0",
},
<template>
<main class="reader">
<h1>二维码 识别、读取、解码</h1>
<hr />
<button class="sweep" @click="media()">扫一扫</button>
<button class="sweep">
<input type="file" @change="upload($event)" />从相册选择
</button>
<div class="imgurl">
<img :src="imgurl" alt="当前识别的二维码" />
<img :src="imgurl2" alt="当前识别的二维码" />
</div>
<textarea
class="result"
cols="76"
rows="6"
v-model="result"
placeholder="二维码识别结果!"
></textarea>
<canvas class="canvas" ref="canvas"></canvas>
</main>
</template>
<script>
// https://www.npmjs.com/package/jsqr
// https://www.npmjs.com/package/jimp
import jsQR from "jsqr";
import Jimp from "jimp";
export default {
name: "Reader",
data() {
return {
timer: null,
result: "https://github.com/MuGuiLin",
imgurl:
"https://raw.githubusercontent.com/MuGuiLin/QRCode/master/VueQRCode/src/assets/github.com.png",
imgurl2:
"https://raw.githubuser