vue 封装生成二维码组件并可以添加文字和图片

好的，这里是一个 Vue 组件，可以生成带有文字和图片的二维码：

<template>
  <div>
    <canvas ref="qrcodeCanvas"></canvas>
  </div>
</template>

<script>
import QRCode from "qrcode";

export default {
  name: "QrcodeWithImageAndText",
  props: {
    value: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 100
    },
    text: {
      type: String,
      default: ""
    },
    textColor: {
      type: String,
      default: "#000"
    },
    textSize: {
      type: Number,
      default: 16
    },
    image: {
      type: String,
      default: ""
    },
    imageWidth: {
      type: Number,
      default: 20
    },
    imageHeight: {
      type: Number,
      default: 20
    }
  },
  mounted() {
    this.generate();
  },
  methods: {
    async generate() {
      try {
        const canvas = this.$refs.qrcodeCanvas;
        const url = await QRCode.toDataURL(this.value, { width: this.size });
        const img = new Image();
        img.src = url;
        img.onload = () => {
          canvas.width = img.width;
          canvas.height = img.height + this.textSize + this.imageHeight;
          const ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);
          ctx.font = `${this.textSize}px sans-serif`;
          ctx.fillStyle = this.textColor;
          ctx.textAlign = "center";
          ctx.fillText(
            this.text,
            img.width / 2,
            img.height + this.textSize + this.imageHeight
          );
          const image = new Image();
          image.src = this.image;
          image.onload = () => {
            ctx.drawImage(
              image,
              img.width / 2 - this.imageWidth / 2,
              img.height + this.textSize,
              this.imageWidth,
              this.imageHeight
            );
          };
        };
      } catch (err) {
        console.error(err);
      }
    }
  }
};
</script>

这个组件和上一个组件也很相似，但是多了几个属性：

- `image`：要添加到二维码下面的图片 URL。
- `imageWidth`：图片的宽度。
- `imageHeight`：图片的高度。

当组件挂载到页面上时，会自动调用 `generate` 方法生成带有文本和图片的二维码，并将其绘制到一个 `canvas` 元素上。