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