1 <template>
2 <!-- 生成二維碼開放接口:
3 二維碼內容[通常為url]
4 二維碼大小[限制為正方形]
二維碼下方顯示：文字
5 二維碼中間顯示：圖片-->
6 <div id="meQrcode" :title="qrText">
7 <div class="qrcode_box">
8 <img
9 class="qrcode_canvas"
10 id="qrcode_canvas"
11 ref="qrcode_canvas"
12 alt="二維碼本圖"
13 />
14 <img
15 v-if="qrLogo"
16 class="qrcode_logo"
17 ref="qrcode_logo"
18 :src="qrLogo"
19 alt="公司logo"
20 />
21 <canvas
22 :width="qrSize"
23 :height="qrSize"
24 class="canvas"
25 ref="canvas"
26 ></canvas>
27 </div>
28 </div>
29 </template>
30 <script>
31 import QRCode from "qrcode";
32 import logo from "./logo11.png";
33 export default {
34 props: {
35 qrUrl: {
36 type: String,
37 default: "http://www.baidu.com/"
38 },
39 qrSize: {
40 type: Number,
41 default: 300
42 },
43 qrText: {
44 default: "百度一下，也不知道"
45 },
46 qrLogo: {
47 type: String,
48 default: logo
49 },
50 qrLogoSize: {
51 type: Number,
52 default: 40
53 },
54 qrTextSize: {
55 type: Number,
56 default: 14
57 }
58 },
59 data() {
60 return {};
61 },
62 methods: {
63 /**
64 * @argument qrUrl 二維碼內容
65 * @argument qrSize 二維碼大小
66 * @argument qrText 二維碼中間顯示文字
67 * @argument qrTextSize 二維碼中間顯示文字大小(默認16px)
68 * @argument qrLogo 二維碼中間顯示圖片
69 * @argument qrLogoSize 二維碼中間顯示圖片大小(默認為80)
70 */
71 handleQrcodeToDataUrl() {
72 let qrcode_canvas = this.$refs.qrcode_canvas;
73 let qrcode_logo = this.$refs.qrcode_logo;
74 let canvas = this.$refs.canvas;
75 const that = this;
76 QRCode.toDataURL(
77 this.qrUrl,
78 { errorCorrectionLevel: "H" },
79 (err, url) => {
80 qrcode_canvas.src = url;
81 // 畫二維碼里的logo// 在canvas里進行拼接
82 let ctx = canvas.getContext("2d");
83
84 setTimeout(() => {
85 //獲取圖片
86 ctx.drawImage(qrcode_canvas, 0, 0, that.qrSize, that.qrSize);
87 if (that.qrLogo) {
88 //設置logo大小
89 //設置獲取的logo將其變為圓角以及添加白色背景
90 ctx.fillStyle = "#fff";
91 ctx.beginPath();
92 let logoPosition = (that.qrSize - that.qrLogoSize) / 2; //logo相對於canvas居中定位
93 let h = that.qrLogoSize + 10; //圓角高 10為基數(logo四周白色背景為10/2)
94 let w = that.qrLogoSize + 10; //圓角寬
95 let x = logoPosition - 5;
96 let y = logoPosition - 5;
97 let r = 5; //圓角半徑
98 ctx.moveTo(x + r, y);
99 ctx.arcTo(x + w, y, x + w, y + h, r);
100 ctx.arcTo(x + w, y + h, x, y + h, r);
101 ctx.arcTo(x, y + h, x, y, r);
102 ctx.arcTo(x, y, x + w, y, r);
103 ctx.closePath();
104 ctx.fill();
qrcode_logo.onload = function() {
105 ctx.drawImage(
106 qrcode_logo,
107 logoPosition,
108 logoPosition,
109 that.qrLogoSize,
110 that.qrLogoSize
111 );
}
112 }
113 if (that.qrText) {
114 //設置字體
115 let fpadd = 10; //規定內間距
116 ctx.font = "bold " + that.qrTextSize + "px Arial";
117 let tw = ctx.measureText(that.qrText).width; //文字真實寬度
118 let ftop = that.qrSize - that.qrTextSize; //根據字體大小計算文字top
119 let fleft = (that.qrSize - tw) / 2; //根據字體大小計算文字left
120 let tp = that.qrTextSize / 2; //字體邊距為字體大小的一半可以自己設置
121 ctx.fillStyle = "#fff";
122 ctx.fillRect(
123 fleft - tp / 2,
124 ftop - tp / 2,
125 tw + tp,
126 that.qrTextSize + tp
127 );
128 ctx.textBaseline = "top"; //設置繪制文本時的文本基線。
129 ctx.fillStyle = "#333";
130 ctx.fillText(that.qrText, fleft, ftop);
131 }
133 qrcode_canvas.src = canvas.toDataURL();
135 }, 0);
136 }
137 );
138 }
139 },
141 mounted() {
142 this.handleQrcodeToDataUrl();
143 },
144 updated() {
145 this.handleQrcodeToDataUrl();
146 },
147 };
148 </script>
149 <style scoped>
150 .qrcode_box,
151 #meQrcode {
152 display: inline-block;
153 }
154 .qrcode_box img {
155 display: none;
156 }
157 </style>
源碼地址：https://gitee.com/yolanda624/coffer/tree/master/src/components/a-qrcode
