使用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 width: "250", //二维码的宽度 31 height: "250", //二维码的高度 32 background: "#ffffff", //二维码的后景色 33 foreground: "#000000", //二维码的前景色 34 src: logoUrl //二维码中间的图片 35 }); 36 37 }) 38 </script> 39 </body> 40 </html>
