uniapp 图片合并

在 Uniapp 中，可以使用 `<canvas>` 标签来进行图片合并操作。以下是一个简单的示例：

<template>
  <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
</template>

<script>
export default {
  mounted() {
    const ctx = uni.createCanvasContext('myCanvas', this);

    // 加载第一张图片
    uni.getImageInfo({
      src: '/static/img1.jpg',
      success: (res1) => {
        // 绘制第一张图片
        ctx.drawImage(res1.path, 0, 0, 150, 150);

        // 加载第二张图片
        uni.getImageInfo({
          src: '/static/img2.jpg',
          success: (res2) => {
            // 绘制第二张图片
            ctx.drawImage(res2.path, 150, 0, 150, 150);

            // 保存图片并显示
            ctx.draw(false, () => {
              uni.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: (res3) => {
                  this.imgUrl = res3.tempFilePath;
                }
              }, this);
            });
          }
        });
      }
    });
  }
}
</script>

以上代码实现了将两张图片合并成一张 300x150 的图片，并将结果在 `<canvas>` 中显示出来。注意，由于 canvas 绘图是异步操作，因此需要在 `drawImage` 和 `canvasToTempFilePath` 方法的回调函数中进行后续操作。