vue项目中生成二维码，并在二维码下面添加文字描述

Question

就像这样

目前搞的使用Qrcode生成二维码，但是不会添加文字描述。。。
求求大佬，救救孩子吧

Answer 1

终于搞好了，虽然坑点很多，尤其是刚开始使用下面这种方法生成二维码，

var qrcode = new QRCode(document.getElementById("qrcode"), {
                width : 100,
                height : 100
            });

结果在处理canvas的时候，拿不到生成的图片（用后端思路考虑，应该是两个方法是异步执行的，处理canvas的时候，new QRCode()还没有生成二维码），后来终于找到正确的途径了。。。
下面的代码，搬过去就能用

<template>
  <!-- 生成二维码开放接口:
         二维码内容[通常为url]
         二维码大小[限制为正方形]
　　　　　二维码下方显示：文字
         二维码中间显示：图片-->
  <div id="meQrcode" :title="qrText" >
    <div class="qrcode_box">
      <img
        class="qrcode_canvas"
        id="qrcode_canvas"
        ref="qrcode_canvas"
        alt="二维码本图"
      />
      <img
        v-if="qrLogo"
        class="qrcode_logo"
        ref="qrcode_logo"
        :src="qrLogo"
        alt="公司logo"
      />
      <canvas
        :width="qrSize"
        :height="qrSize"
        class="canvas"
        ref="canvas"
      ></canvas>
    </div>
  </div>
</template>
<script>
  import QRCode from "qrcode";
  import logo from "./1.jpg";

  export default {
    props: {
      qrUrl: {
        type: String,
        default: "http://www.baidu.com/"
      },

      qrText: {
        default: "百度一下，也不知道"
      },
      qrLogo: {
        type: String,
        default: logo
      },
      qrLogoSize: {
        type: Number,
        default: 40
      },
      qrSize: {
        type: Number,
        default: 300
      },
      qrTextSize: {
        type: Number,
        default: 14
      }
    },
    data() {
      return {};
    },
    methods: {
      /**
       * @argument qrUrl        二维码内容
       * @argument qrSize       二维码大小
       * @argument qrText       二维码中间显示文字
       * @argument qrTextSize   二维码中间显示文字大小(默认16px)
       * @argument qrLogo       二维码中间显示图片
       * @argument qrLogoSize   二维码中间显示图片大小(默认为80)
       */
      handleQrcodeToDataUrl(qrcode) {
        let qrcode_canvas = this.$refs.qrcode_canvas;
        let qrcode_logo = this.$refs.qrcode_logo;
        let canvas = this.$refs.canvas;
        const that = this;
        QRCode.toDataURL(
          this.qrUrl,
          {errorCorrectionLevel: "H"},
          (err, url) => {
            qrcode_canvas.src = url;
            // 画二维码里的logo// 在canvas里进行拼接
            let ctx = canvas.getContext("2d");

            setTimeout(() => {
              //获取图片
              ctx.drawImage(qrcode_canvas, 0, 0, that.qrSize, that.qrSize);
              if (that.qrLogo) {
                //设置logo大小
                //设置获取的logo将其变为圆角以及添加白色背景
                ctx.fillStyle = "#fff";
                ctx.beginPath();
                let logoPosition = (that.qrSize - that.qrLogoSize) / 2; //logo相对于canvas居中定位
                let h = that.qrLogoSize + 10; //圆角高 10为基数(logo四周白色背景为10/2)
                let w = that.qrLogoSize + 10; //圆角宽
                let x = logoPosition - 5;
                let y = logoPosition - 5;
                let r = 5; //圆角半径
                ctx.moveTo(x + r, y);
                ctx.arcTo(x + w, y, x + w, y + h, r);
                ctx.arcTo(x + w, y + h, x, y + h, r);
                ctx.arcTo(x, y + h, x, y, r);
                ctx.arcTo(x, y, x + w, y, r);
                ctx.closePath();
                ctx.fill();
                qrcode_logo.onload = function () {
                  105
                  ctx.drawImage(
                    qrcode_logo,
                    logoPosition,
                    logoPosition,
                    that.qrLogoSize,
                    that.qrLogoSize
                  );
                }
              }
              if (that.qrText) {
                //设置字体
                let fpadd = 10; //规定内间距
                ctx.font = "bold " + that.qrTextSize + "px Arial";
                let tw = ctx.measureText(that.qrText).width; //文字真实宽度
                let ftop = that.qrSize - that.qrTextSize; //根据字体大小计算文字top
                let fleft = (that.qrSize - tw) / 2; //根据字体大小计算文字left
                let tp = that.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置
                ctx.fillStyle = "#fff";
                ctx.fillRect(
                  fleft - tp / 2,
                  ftop - tp / 2,
                  tw + tp,
                  that.qrTextSize + tp
                );
                ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
                ctx.fillStyle = "#333";
                ctx.fillText(that.qrText, fleft, ftop);
              }
              qrcode_canvas.src = canvas.toDataURL();
            }, 0);
          }
        );
      }
    },
    mounted() {
      this.handleQrcodeToDataUrl();
    },
    updated() {
      this.handleQrcodeToDataUrl();
    },
  };
</script>
<style scoped>
  .qrcode_box,
  #meQrcode {
    display: inline-block;
  }

  .qrcode_box img {
    display: none;
  }
</style>

Answer 2

你是想把二维码和描述放到一张图片里吗？如果qrcode不支持的话，你可以生成二维码图片以后用canvas画出来二维码和文字到一个图层。

Answer 3

以前做过类似的。需求是生成的图片里除了二维码还要加文字、装饰等。
总之就是利用qrcode库生成图片，获取到其Image元素，然后新建一个canvas，获取到ctx,用ctx.drawImage把图片画进去ctx.fillText写文字。然后就可以了，毕竟canvas用户是可以长按保存图片的

Answer 4

可以参考这个js如何处理如下的事务
demo

Answer 5

找遍了整个百度，没有找到一片canvas萌新使用二维码文字的文章。感谢楼主大恩大德把源码分享，今生没齿难忘~

Answer 6

直接用js生成二维码，不是更简单吗

在线列子

<template>
  <div>
    <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
  </div>
</template>

<script>
export default {
    mounted(){
        this.createQrcode()
    },
      methods: {
        createQrcode() {
             var qrcode = new QRCode(document.getElementById("qrcode"), {
                width : 100,
                height : 100
            });
        }
      }
}
</script>