前端使用canvas实现多张图片拼接成一张图片

react + ts项目: 需求就是多张图片拼接成一张图片，实现图片竖直拼接
封装方法返回一个base64代码实现：

// 合并多图为一张图(注意传进来的是完整的图片地址)
export function combineImages(imageURLs: string[]) {
  return new Promise((resolve, reject) => {
    // 存储加载完成的图片和它们的宽度、高度
    let loadedImages: HTMLImageElement[] = []
    let totalHeight = 0 // 所有图片的高度总和

    // 加载图片并存储尺寸
    const loadImage = url => {
      return new Promise((res, rej) => {
        const img = new Image()
        img.setAttribute('crossOrigin', 'Anonymous') // 设置跨域属性
        img.src = url
        img.onload = () => {
          totalHeight += img.height // 累加高度
          loadedImages.push(img)
          res(img)
        }
        img.onerror = rej
      })
    }

    // 加载所有图片
    Promise.all(imageURLs.map(url => loadImage(url)))
      .then(() => {
        // 创建canvas元素
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')

        // 设置canvas的尺寸
        let maxWidth = Math.max(...loadedImages.map(img => img.width))
        canvas.width = maxWidth
        canvas.height = totalHeight

        // 绘制图片
        let currentY = 0
        loadedImages.forEach(img => {
          if (ctx) {
            ctx.drawImage(img, 0, currentY)
          }
          currentY += img.height // 更新下一张图片的绘制起始Y坐标
        })

        // 转换canvas为Base64编码的图片URL
        const combinedImageBase64 = canvas.toDataURL('image/png', 1)
        resolve(combinedImageBase64)
      })
      .catch(reject) // 如果有图片加载失败，拒绝Promise
  })
}

业务场景代码使用：（外层函数加上async、cropImg传入自己实际场景的string[]）

const base64 = await combineImages(cropImg)