基于QRcode的带有文字+图片的二维码的Vue组件

  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