使用vue、jQuery生成带有logo的二维码

有三种插件可以生成带有logo的二维码

第一种：vue_qrcodes

先在命令行输入下面代码安装插件

1 npm install vue_qrcodes

源码如下：

 1  <template> 
 2      <div> 
 3      <qrcode :url="data.url" :iconurl="data.logo" :wid="300" :hei="300" :imgwid="54" :imghei="54"></qrcode>
 4      </div>
 5  </template> 
 6  <script>
 7  import qrcode from 'vue_qrcodes'
 8  export default {
 9    name: 'qrcode',
10    components:{
11       qrcode
12    },
13    data(){
14      return{
15         data:{
16            url:"https://www.cnblogs.com/bushan/",
17           logo:"http://www.sceneray.com/images/index/logo.png",
18         }
19      }
20    }
21  }
22  </script>

在qrcode标签中还有两个参数：colorDark（二维码的颜色），colorLight（二维码的背景色）。

这种方式生成的二维码在下载二维码时会丢失logo。

第二种：qrcode-vue

先安装qrcode-vue

1 npm install qrcode-vue

代码：

 1 <template>
 2   <div>
 3     <qrcode-vue 
 4       :size="size" 
 5       :value="qrUrl" 
 6       :logo="logo" 
 7       :bgColor="bgColor" 
 8       :fgColor="fgColor"
 9     ></qrcode-vue>
10   </div>
11 </template>
12 <script>
13   import qrcodeVue from 'qrcode-vue'
14   export default {
15     data () {
16       return {
17         size: 300,
18         bgColor: '#fff',
19         fgColor: '#000',
20         qrUrl: 'https://www.cnblogs.com/bushan/',
21         logo: require('@/assets/logo.png')
22       }
23     },
24     components: {
25       qrcodeVue
26     }
27   }
28 </script>

logo的地址很容易出错，像一些网页图片并不支持


第三种：基于jquery.qrcode.js插件
效果：

完整代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6   <style>
 7     .qr-code {
 8       text-align: center;
 9       padding-top: 60px;
10     }
11   </style>
12 </head>
13 <body>
14     <div class="qr-code">
15       <div id="qrcode"></div>
16     </div>
17 
18 <script src="js/jquery.js"></script>
19 <script src="js/jquery.qrcode.js"></script>
20 <script src="js/utf.js"></script>
21 <script>
22   $(function () {
23     var qrUrl = "https://www.cnblogs.com/bushan/"
24     var logoUrl = 'https://pic.cnblogs.com/avatar/1387841/20190704162859.png';
25 
26     //生成二维码
27     $('#qrcode').qrcode({
28       render: "canvas",
29       text: qrUrl,
30        "250",               //二维码的宽度
31       height: "250",              //二维码的高度
32       background: "#ffffff",       //二维码的后景色
33       foreground: "#000000",        //二维码的前景色
34       src: logoUrl           //二维码中间的图片
35     });
36 
37   })
38 </script>
39 </body>
40 </html>