canvas图片合并-CSDN博客

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

canvas图片合并

业务场景

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

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

分析

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

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

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

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

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

画图函数返回一个 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)
    })
  }
}