canvas图片合并

canvas图片合并

业务场景：

​ 接口返回两个图片数组，原图、水印图，其中原图数组需要通过接口调用数组子项的值拿到真实的原图地址，然后将原图和水印图一一对应，合并成页面展示的图片。

注：因为图片较大，所以必须异步加载，不能一张一张图片加载

分析：

1. 通过Promise.all()拿到所有的真实原图地址

2. 为了同时加载所有的图片资源，将图片处理函数中接收到的原图和水印图遍历并实例化成图片

​ 2.1 返回一个Promise将image中onload异步请求变成同步，并且resolve出实例化后的图片元素，方便后面画图

​ 2.2 遍历结束后，图片处理函数返回一个 Promise数组

3. 此时我们已经有了原图和水印图的 Promise数组，通过for循环调用画图函数,传参为 画图函数(原图[i], 水印图[i], 宽度, 高度)

4. 画图函数返回一个 Promise 对象，然后通过 Promise.all([原图promise,水印图promise]) 等两张图片加载完后再合并图片

function init () {
  // noWatermarkImg 和 watermarkImg 是通过接口拿到的原图和水印图数组
  let noWatermarkImg = []
  const watermarkImg = []
  
  const requestList = noWatermarkImg.map(imgUrl => this.$http.get(imgUrl))

  Promise.all(requestList)
    .then(async resList => {
      // 原图的真实地址
      noWatermarkImg = resList.map(res => res.data)
      // 获取原图和水印图的promise数组
      const watermarkImgEleList = this.asyncCreateImage(watermarkImg)
      const noWatermarkImgEleList = this.asyncCreateImage(noWatermarkImg)
      
      for (let i = 0; i < noWatermarkImgEleList.length; i++) {
        const base64 = await this.base64ThumbImage(noWatermarkImgEleList[i], watermarkImgEleList[i], 1000, 800)
        // base64为合并后的图片地址
        // do something...
      }
  })  
}

function asyncCreateImage(urlList) {
  const imgEleList =   urlList.map(src => {
    const imgEle = new Image()
    imgEle.src = src
    imgEle.setAttribute('crossOrigin', 'anonymous')
    return new Promise((resolve, reject) => {
      imgEle.onload = () => resolve(imgEle)
      imgEle.onerror = () => reject(new Error('图片加载失败'))
    })
  })
}

function base64ThumbImage (noWatermarkPromise, watermarkPromise, width, height) {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = width
    canvas.height = height
    
    Promise.all([noWatermarkPromise, watermarkPromise])
      .then(res => {
        ctx.drawImage(res[0], 0, 0, width, height)
        ctx.drawImage(res[1], 0, 0, width, height)
        const base64 = canvas.toDataURL()
        resolve(base64)
    })
  }
}