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 jsqr

2.完整代码如下

不太好讲我直接做了注释，看注释应该能看懂吧

<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()]
  }

})

文章到此结束，希望对你有所帮助~