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

最新推荐文章于 2024-06-14 13:39:12 发布

weixin_30666401

最新推荐文章于 2024-06-14 13:39:12 发布

阅读量156

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bushan/p/11077640.html

版权

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

第一种：vue_qrcodes

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

1 npm install vue_qrcodes

源码如下：

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

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

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

第二种：qrcode-vue

先安装qrcode-vue

1 npm install qrcode-vue

代码：

<template>
  <div>
    <qrcode-vue 
      :size="size" 
      :value="qrUrl" 
      :logo="logo" 
      :bgColor="bgColor" 
      :fgColor="fgColor"
    ></qrcode-vue>
  </div>
</template>
<script>
  import qrcodeVue from 'qrcode-vue'
  export default {
    data () {
      return {
        size: 300,
        bgColor: '#fff',
        fgColor: '#000',
        qrUrl: 'https://www.cnblogs.com/bushan/',
        logo: require('@/assets/logo.png')
      }
    },
    components: {
      qrcodeVue
    }
  }
</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       width: "250",               //二维码的宽度
31       height: "250",              //二维码的高度
32       background: "#ffffff",       //二维码的后景色
33       foreground: "#000000",        //二维码的前景色
34       src: logoUrl           //二维码中间的图片
35     });
36 
37   })
38 </script>
39 </body>
40 </html>

转载于:https://www.cnblogs.com/bushan/p/11077640.html

weixin_30666401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用vue、jQuery生成带有logo的二维码

有三种插件可以生成带有logo的二维码第一种：vue_qrcodes先在命令行输入下面代码安装插件1 npm install vue_qrcodes源码如下： 1 1 <template> 2 2 <div> 3 3 <qrcode :url="data.url" :iconurl="d...
复制链接

扫一扫