vue3使用canvas画布合成图片

Vue3中可以使用<canvas>标签绘制图形，并使用Canvas API对图形进行操作和绘制，其中包括了对图形进行合成的方法。下面是一个使用Canvas API合成图片的简单例子：

首先在Vue3的模板中添加一个画布：

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <button @click="draw">生成图片</button>
  </div>
</template>

然后在Vue3的逻辑中，可以使用ctx.drawImage()方法将需要绘制的图片绘制到画布上。drawImage()方法接受四个参数：

• image：需要绘制的图像（可以是图片、视频、画布等）
• x：图像左上角在画布中的位置的 x 坐标
• y：图像左上角在画布中的位置的 y 坐标
• width：绘制的图像宽度（可选，默认为将图像原始宽度绘制到画布中）
• height：绘制的图像高度（可选，默认为将图像原始高度绘制到画布中）

下面的例子将两个图片绘制到画布上，并使用ctx.globalCompositeOperation进行合成：

<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas
    this.ctx = this.canvas.getContext('2d')
  },
  methods: {
    draw() {
      const img1 = new Image()
      const img2 = new Image()

      img1.src = '/img1.png'
      img2.src = '/img2.png'

      img1.onload = () => {
        this.ctx.drawImage(img1, 0, 0)
        
        img2.onload = () => {
          // 将第二个图片绘制在第一个图片上
          this.ctx.globalCompositeOperation = 'source-atop'
          this.ctx.drawImage(img2, 0, 0)
          
          // 将画布转化为图片
          const image = this.canvas.toDataURL()
          console.log(image)
        }
      }
    }
  }
}
</script>

在上面的例子中，先加载了两个图片，然后在第一个图片加载完毕后将其绘制到画布上，接着在第二个图片加载完毕后将其绘制在第一个图片上，并使用ctx.globalCompositeOperation将第二个图片与第一个图片进行合成。

最后，使用canvas.toDataURL()方法将画布转化为图片，并打印出图片的Base64编码。

更多关于Canvas API的使用可以参考MDN文档。