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)
})
}
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net