微信小程序原生canvas原理解释

wxml

<view wx:if="{{!image}}" class="haibaowaikuang" style="height:100%;width: 100%;">
  <canvas canvas-id="myCanvas" style="height:700px;width: 400px;"></canvas>
</view>

<image wx:if="{{image}}" mode="widthFix" src="{{image}}" />

js

Page({
  data: {
    image: '', // 生成的图片数据
  },

  onLoad() {
    this.drawCanvas();
  },

  drawCanvas() {
    const ctx = wx.createCanvasContext('myCanvas', this); // 创建Canvas实例

    // 绘制背景图片
    wx.getImageInfo({
      src: '第一张背景图片，建议用下载url', // 背景图片的链接
      success: (res) => {
        const img = res.path;
        ctx.drawImage(img, 0, 0, 400, 700); // 绘制背景图片
      },
    });

    // 绘制二维码
    wx.getImageInfo({
      src: '二维码图片下载url', // 二维码图片的链接
      success: (res) => {
        const img = res.path;
        ctx.drawImage(img, 150, 300, 100, 100); // 绘制二维码图片
      },
    });

    // 结束绘制，并将Canvas转换为图片
    ctx.draw(false, () => {
     wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          const tempFilePath = res.tempFilePath;
          console.log(tempFilePath); // 在控制台输出生成的图片链接
          this.setData({
            image: tempFilePath, // 将生成的图片数据存储到data中
          });
        },
        fail: (res) => {
          console.log(res);
        },
      }, this);
    });
  },

  // ...
});

如果代码段不生效留个言