vue实现输入网址生成二维码、解码、下载、更改功能
功能：
1.输入网址生成二维码
2.二维码可以下载
3.可以更改二维码中心的图片
4.可以通过本地相册的二维码进行解码
1.下载三个插件
下载vue-qr，用于生成二维码
npm install vue-qr下载vue-jimp并指定版本号，最新版不行，实现不了 。Jimp 库读取图片数据。Jimp 是一个用于处理图像的 JavaScript 库，它可以从数据中创建图像对象。
npm install jimp@0.16.1下载jsqr，用于将二维码进行解码
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.效果
4.解决引入报错问题
报错内容如下：
BREAKING CHANGE: webpack ＜ 5 used to include polyfills for node.js core modules by default.
原因：webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要手动引入
安装如下插件
npm install node-polyfill-webpack-plugin最后在vue.config.js中手动引入即可，如果项目没有vue.config.js可以自己创建一个，这样就算是最新版或者是旧版的jimp都可以运行了
const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = defineConfig({
configureWebpack: {
plugins: [new NodePolyfillPlugin()]
}
})
文章到此结束，希望对你有所帮助~