関数：
1. URLを入力してQRコードを生成します
2. QRコードがダウンロードできます
3. QRコード中央の画像を変更できます
4. ローカルフォトアルバムのQRコードでデコード可能
1. 3 つのプラグインをダウンロードする
QR コードを生成するための vue-qr をダウンロード
npm install vue-qrvue-jimpをダウンロードしてバージョン番号を指定すると、最新バージョンでは動作しません。Jimp ライブラリは画像データを読み取ります。Jimp は、画像を操作し、データから画像オブジェクトを作成するための JavaScript ライブラリです。
npm install [email protected]jsqrをダウンロードしてQRコードをデコードします
npm install jsqr2. 完全なコードは次のとおりです。
言うのは簡単ではありませんが、私が直接コメントしたので、コメントを読んでいただければわかると思います。
<template>
<div class="content-box">
<div class="container">
<h1>二维码输入网址生成、下载</h1>
<el-row>
<el-col :span="6">
<el-input v-model="text" placeholder="输入要生成二维码的网址"></el-input>
</el-col>
<el-col :span="4" :push="1">
<el-button><a :href="href" target="_blank" download="已下载二维码" rel="noopener noreferrer">下载二维码</a></el-button>
</el-col>
<el-col :span="4" :push="1">
<input
type="file"
@change="updateImg"
name="file"
class="element"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
/>
</el-col>
</el-row>
<el-row style="margin-top: 20px;">
<el-col :span="6">
<vue-qr
qid="qrid"
:text="text"
:size="size"
:bgSrc="bgSrc"
:logoSrc="logoSrc"
:callback="callBack"
:logoScale="logoScale"
:colorDark="colorDark"
:colorLight="colorLight"
:backgroundColor="backgroundColor"
></vue-qr>
</el-col>
</el-row>
<hr />
<h2>解析二维码</h2>
<el-row style="margin-top: 20px;">
<el-col :span="6">
<input type="file" @change="upload($event)" />
</el-col>
</el-row>
<img :src="image" alt="" srcset="" />
{
{ result }}
</div>
</div>
</template>
<script>
import VueQr from 'vue-qr';
import Jimp from 'jimp';
import jsQR from 'jsqr';
export default {
components: {
VueQr
},
data() {
return {
href: '',
text: 'https://element.eleme.cn/#/zh-CN/component/table', // 二维码内容
size: 150, // 二维码宽高尺寸, 长宽一致, 包含外边距
bgSrc: '', // 嵌入背景图地址，
logoSrc: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?pid=ImgDet&rs=1', // 嵌入至二维码中心的 LOGO 地址
margin: 0, // 二维码图像的外边距, 默认20px
colorDark: '#484848', // 实点的颜色,必须设置深色，浅色会识别不出来
colorLight: '#42B983', // 空白区的颜色
backgroundColor: '#EEE', // 背景色
logoScale: 0.15, // 中间图的尺寸，不要设太大，太大会导致扫码失败的 默认0.2
dotScale: 0.35, // 数据区域点缩小比例,默认为0.35
imgUrl: '', //
result: '',
image: ''
};
},
mounted() {},
methods: {
callBack(base64, pid) {
this.href = base64;
console.log(base64, pid);
},
// 上传二维码
upload(event) {
const file = event.target.files[0];
this.result = '';
// 创建一个新的filereader对象，用于读取文件内容
const fReader = new FileReader();
// 将选定的文件读取为数据 URL。这将读取文件的内容，并将其转换为 Base64 编码的字符串。这个 Base64 字符串可以用于展示图片，或者上传到服务器。
fReader.readAsDataURL(file);
// 文件读取完后执行的回调函数
fReader.onload = e => {
console.log(e, '图片回调');
// 将读取的的文件内容base64编码字符串赋值给image变量，展示图片
this.image = e.target.result;
// 使用 Jimp 库读取图片数据。Jimp 是一个用于处理图像的 JavaScript 库，它可以从数据中创建图像对象。
Jimp.read(e.target.result)
.then(async res => {
console.log(res, 'jimp的图像对象');
const { data, width, height } = res.bitmap;
try {
// 使用 jsQR 库对图像中的二维码进行解码。得到图片原本的数据，data是地址
const resolve = await jsQR(data, width, height);
console.log(resolve, 'zabuzou1l1-------');
this.result = resolve.data;
console.log(this.result, '得到数据');
} catch (err) {
this.result = '识别失败，重新传二维码';
}
})
.catch(err => {
console.error('文件读取错误', err);
});
};
},
updateImg(event) {
// 声明了一个名为 createObjectURL 的变量，它是一个用于创建临时 URL 的函数。这里使用了多个浏览器前缀的不同实现，以兼容不同的浏览器。
const file = event.target.files[0];
const createObjectURL = window.createObjectURL || window.URL.createObjectURL || window.webkitURL.createObjectURL;
// 使用之前声明的 createObjectURL 函数创建一个临时 URL，将其赋值给 logoSrc 变量
this.logoSrc = createObjectURL(file);
}
}
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.canvas {
width: 200px;
height: 200px;
}
</style>
3.効果
これで記事は終わりです、お役に立てば幸いです~