小程序canvas绘制图片新版没有白边

wxml新版跟旧版的区别，旧版本可参考 旧版画布迁移指南 进行迁移

使用canvas加载图片的时候，新版使用的是img.onload加载图片，绘制的时候会先绘制文字，然后再绘制图片，导致图片盖住了文字，在这里踩了坑记录下，所以请求图片的时候用promise处理了下，通过Promise.all处理请求多个图片，响应成功后绘制图片+文字

新版

<canvas type="2d" id="myCanvas"></canvas>

旧版

<canvas canvas-id="myCanvas" style="height: 364rpx;width:640rpx;position: fixed;top: -10000px;"></canvas>

wxml

<canvas id="canvas" style="width:325px;height:185px;position: fixed;top: -10000px;" type="2d" class="canvas" />

js

Page({
	data:{
		userInfo: {}
	},
	onLoad(options) {
		this.createCanvasImage()
	},
	  // 获取图片对象
  async getImage(url) {
    const off = wx.createOffscreenCanvas({
      type: "2d",
    });
    const image = off.createImage();
    await new Promise((resolve, reject) => {
      image.onload = resolve; // 绘制图片逻辑
      image.src = url;
    });
    return image;
  },
	// 生成图片
  async createCanvasImage() {
    let { userInfo, colorIndex } = this.data;
    let that = this;
    const $ = wx.createSelectorQuery();
    $.select("#canvas")
      .fields({
        node: true,
        size: true,
      })
      .exec((res) => {
      // 这里是canvas的宽高
        console.log(res[0].width, res[0].height);
        // Canvas 对象
        const canvas = res[0].node;
        that.canvas = canvas;
        // Canvas 画布的实际绘制宽高
        const width = res[0].width;
        const height = res[0].height;

        // 创建canvas渲染上下文
        const ctx = canvas.getContext("2d");
        const dpr = wx.getWindowInfo().pixelRatio;
        console.log("---dpr", dpr);
        // 手动改变canvas的宽和高
        canvas.width = width * dpr;
        canvas.height = height * dpr;
        ctx.scale(dpr, dpr);
        // 以上代码都是基础工作
        let bg = that.getImage(
          `xxx`
        );
        let wxCodeImg = that.getImage(userInfo.wxCodeImg);
        let headImg = that.getImage(userInfo.userPhoto);
        let promiseList = [bg, headImg];
        if (userInfo.wxCodeImg) {
          promiseList = [bg, headImg, wxCodeImg];
        }
        Promise.all(promiseList).then((result) => {
          console.log(res);
          ctx.drawImage(result[0], 0, 0, 325, 185);
          if (userInfo.wxCodeImg) {
            ctx.drawImage(result[2], 260, 10, 50, 50);
          }
          ctx.save();
          ctx.beginPath(); //开始绘制
          let avatarurl_width = 106, //绘制的头像宽度
            avatarurl_heigth = 106, //绘制的头像高度
            avatarurl_x = 28, //绘制的头像在画布上的位置
            avatarurl_y = 50; //绘制的头像在画布上的位置
          //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
          ctx.arc(
            avatarurl_width / 2 + avatarurl_x,
            avatarurl_heigth / 2 + avatarurl_y,
            avatarurl_width / 2,
            0,
            Math.PI * 2,
            false
          );
          ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
          ctx.drawImage(
            result[1],
            avatarurl_x,
            avatarurl_y,
            avatarurl_width,
            avatarurl_heigth
          );
          ctx.restore();
          ctx.fillStyle = "#fff";
          ctx.font = `15px serif`;
          ctx.fillText(userInfo.name, 183, 74); // 绘制文字
          ctx.font = `10px serif`;
          ctx.fillText(userInfo.position, 183, 88); // 绘制文字
          ctx.font = `8px serif`;
          ctx.fillText(userInfo.company, 183, 113); // 绘制文字
          ctx.font = `8px serif`;
          ctx.fillText(userInfo.phone, 183, 130); // 绘制文字
          ctx.font = `8px serif`;
          ctx.fillText(userInfo.wx, 183, 148); // 绘制文字
          ctx.font = `8px serif`;
          ctx.fillText(userInfo.email, 183, 164); // 绘制文字
          ctx.font = `8px serif`;
          if (userInfo.wxCodeImg) {
            ctx.fillText("截图扫码", 270, 70); // 绘制文字
          }
          ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 325,
            height: 185,
            canvas: this.canvas, // canvas实例对象
            destWidth: 1300,
            destHeight: 740,
            success(res) {
              that.uploadFile(res.tempFilePath);
              console.log(res.tempFilePath, "canvasToTempFilePath");
            },
          });
        });
      });
  },
})