在vue中利用vue-qr插件动态生成二维码并嵌入LOGO

Posted 2021-01-30 99ll

　　收到需求要生成二维码的时候刚进项目组不久，接触vue也才一两个星期，还处于懵逼状态。

　　本小白的第一反应就是百度二维码的生成方法，网上有很多大神给出解决方案，最开始本小白以为是在后台生成图片然后传到前台页面，后来发现可以直接在前端用js生成，网上查到的大部分都是用jquery.qrcode.js配合utf.js(为了支持中文)和 jquery-1.8.0.js来实现，亲测可行(但本白只在原生html中实现，vue中死活报错：“找不到qrcode方法”，是不是本小白没找准姿势，哪位大神求告知！)如下图：

这是生成出来的二维码：

　　到这里问题还是没有解决，于是又继续找，发现一位大神的博客指了条明路：使用 vue-qart 和 vue-qr 这两个插件(插件使用前记得先安装：npm install vue-qr 有cnpm最好用cnpm install vue-qr，本小白最开始用npm结果炸了，换cnpm才好)可以实现。这里本小白就用的vue-qr，为了这一功能能够复用，先写了一个组件，供其他页面调用：

附上代码：

 1 <template>
 2     <el-dialog :width= "dlgWidth" :title="title" :visible.sync="visible" :close-on-click-modal="false" @close="closePanel">
 3       <div id="qrcodeId" style="width: 200px; height: 250px; margin-left:70px; margin-top:30px">
 4             <vue-qr :text="config.value" :logoSrc="config.imagePath" :size="200" :margin="0"></vue-qr>
 5         </div>
 6     </el-dialog>
 7 </template>
 8 
 9 <script>
10 import VueQr from ‘vue-qr‘
11 
12 export default {
13     components: { VueQr },
14     props: ["show"],
15   data() {
16     return {
17             title: "扫描二维码下载APP",
18             visible: this.show,
19             dlgWidth: _const.POPWND_SMALL_WIDTH,
20             config: {
21           value: ‘‘,//显示的值、跳转的地址
22           imagePath: require(‘@/images/logo.png‘)//中间logo的地址
23         }
24     };
25     },
26     methods: {
27         initQRCode(qrcodeUrl) {
28             this.config.value = qrcodeUrl;
29         },
30    closePanel()
31    {
32     this.$emit(‘update:show‘,false);
33    }
34     },
35   watch: {
36     show(val) {
37       this.visible = val;
38     }
39   }
40 }
41 </script>

组件代码

调用上面的组件：

父页面中触发二维码生成现实的方法：

满心欢喜写完了，结果二维码根本没出来，按照大神的博客里说的去掉logSrc确实可以生成出二维码，但是图片的问题依然没解决，一开始以为是路径问题，换了几个图片突然成功了，于是本小白又按照同样的方式将目标图片路径放进去，结果还是不行，但是后来发现同一个文件夹里的另外一个图片可以显示出来，又试了几个其他图片，也是有的能显示有的不能，我就开始怀疑是不是图片大小有要求，连续用大小不同的图片尝试多次后，我肯定了这个猜想，经过多次测试，发现这个临界值在10000字节左右，只能显示10000字节以内的图片。

　　问题找到了，现在只能将目标图片压缩一下，找了个网站压缩后图片的效果跟原图很接近，连续压缩了好几遍才达到要求，这里是本白压缩图片的网站，大神们有其他更好更便捷的网站可以分享一下嘛？3Q。

　　纯小白，若有错误，欢迎大神批评指点！！！明天还要加班，洗洗睡了，狗命要紧！