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

Posted 99ll

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue中利用vue-qr插件动态生成二维码并嵌入LOGO相关的知识,希望对你有一定的参考价值。

  收到需求要生成二维码的时候刚进项目组不久,接触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。

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

技术分享图片

以上是关于在vue中利用vue-qr插件动态生成二维码并嵌入LOGO的主要内容,如果未能解决你的问题,请参考以下文章

VUE使用QRcode或者vue-qr生成二维码

vue生成二维码插件

二维码生成插件

vue 中生成二维码之爬坑之路

vuepress引入vue-qr组件后build报错navigator is not defined问题

在Vue项目中动态生成二维码 阿星小栈