有三種插件可以生成帶有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>