uniapp将二维码图片、文字绘制到canvas上并下载

项目需求：页面展示带log的电子健康卡二维码并实现下载，下载的二维码图片里有还要有文字信息

页面展示：

下载的二维码图片：

1、使用uQRCode插件：https://ext.dcloud.net.cn/plugin?id=1287

2、将解压文件放到项目里：

3、生成二维码并下载：

（1）引入uQrcode组件：

（2）生成带log的二维码：

布局：

    <view class="flex flex-center">
        <uQrcode
          ref="qrcode"
          canvasId="qrcode"
          :size="200"
          :value="url"
          fileType="png"
          type="2d"
          :options="options"
          @click="remake"
          @complete="complete($event)"
        ></uQrcode>
    </view>
    
    <view class="flex flex-center mt10">
        <view class="btn" @click="saveQrcode">下载电子健康卡</view>
    </view>
    
    <!-- 下载的二维码+文字图片，下载之前和下载完不可见 -->
    <view class="flex flex-center mt10 pt200" v-if="showImg">
        <canvas
          class="my-canvas"
          :style="{
            width: `300px;`,
            height: `400px;`,
          }"
          canvas-id="myCanvasId"
        ></canvas>
    </view>

ts:

  //二维码log
  private options = {
    foregroundImageSrc: "",
    foregroundImageWidth: 50,
    foregroundImageHeight: 50,
  };
	
  private showImg = false;//是否显示下载的图片
  
  onLoad(option) {
    this.url = option.code;
    this.options.foregroundImageSrc = this.$miniImageUrl("nrhc.png");
  }

  //重新生成二维码
  remake() {
    const ref = this.$refs["qrcode"] as any;
    ref.remake();
  }

  complete(e) {
    if (e.success) {
      console.log("二维码生成成功");
    } else {
      console.log("二维码生成失败");
    }
  }

  //下载二维码
  saveQrcode() {
    this.showImg = true;
    uni.showLoading({
      title: "保存中...",
      mask: true,
    });
    const ref = this.$refs["qrcode"] as any;
    ref.getTempFilePath({
      success: (res: any) => {
        console.log(res);
        setTimeout(() => {
          this.saveImg(res.tempFilePath);
        }, 500);
      },
      fail: (err: any) => {
      	this.showImg = false;
        uni.hideLoading();
        uni.showToast({
          icon: "none",
          title: JSON.stringify(err),
        });
      },
    });
  }

  //二维码添加文字的图片保存
  saveImg(tempFilePath: string) {
    let me = this;
    let ctx = uni.createCanvasContext("myCanvasId", this);
    // 画布填充背景色，默认白色
    ctx.setFillStyle("#fff");
    // 设置画布尺寸
    ctx.fillRect(0, 0, 300, 400);
    // 绘制图片
    ctx.drawImage(tempFilePath, 50, 100, 200, 200);
    // 画笔颜色
    ctx.setFillStyle("#000000");
    // 字体大小
    ctx.setFontSize(20);
    ctx.setTextAlign("center");
    //绘制二维码上方文字
    ctx.fillText("*" + this.personName.substring(1, this.personName.length), 150, 40);
    ctx.fillText("电子健康卡静态码", 150, 70);
    //绘制二维码下方文字
    ctx.setFontSize(16);
    ctx.fillText(getCurrentDateTime(), 150, 340);
    ctx.fillText("*请妥善保管，以免被他人盗用", 150, 370);

    // 把以上内容画到 canvas 中
    ctx.draw(true, (ret: any) => {
      // 保存canvas为图片
      uni.canvasToTempFilePath({
        canvasId: "myCanvasId",
        quality: 1,
        complete: function (res1) {
          console.log(res1);
          //图片保存至相册
          uni.saveImageToPhotosAlbum({
            filePath: res1.tempFilePath,
            success: (res2: any) => {
              uni.hideLoading();
              uni.showToast({
                icon: "success",
                title: "保存成功",
              });
              me.showImg = false;
            },
            fail: (err: any) => {
              uni.hideLoading();
              uni.showToast({
                icon: "success",
                title: "保存失败",
              });
              me.showImg = false;
            },
          });
        },
      });
    });
  }

其中，getTempFilePath是在u-qrcode.vue的源码里加的一个方法：

    //获取TempFilePath - add by sqf  2022-11-02
    getTempFilePath(callback = {}) {
      this.toTempFilePath({
        success: (res) => {
          // #ifndef H5
          callback.success(res);
          // #endif
        },
        fail: (err) => {
          callback.fail(err);
          callback.complete();
        },
      });
    },