本文介绍如何利用JavaScript中的Canvas API将多张图片垂直合并为单张图像。通过创建Canvas元素并逐张绘制图片，最终生成Base64编码结果。文中提供了基础实现及优化后的公共方法，支持自定义画布尺寸与异步处理，适用于前端图片处理场景。
Canvas多图合并基础实现
解决策略
function mergeImgs(list) {
const imgDom = document.createElement('img')
document.body.appendChild(imgDom)
const canvas = document.createElement('canvas')
canvas.width = 500
canvas.height = 500 * list.length
const context = canvas.getContext('2d')
list.map((item, index) => {
const img = new Image()
img.src = item
// 跨域
img.crossOrigin = 'Anonymous'
img.onload = () => {
context.drawImage(img, 0, 500 * index, 500, 500)
const base64 = canvas.toDataURL('image/png')
imgDom.setAttribute('src', base64)
// console.log(baseList)
}
})
}
const urlList = ['./img/timg%20(1).jpg', './img/timg.jpg']
mergeImgs(urlList )优化后的公共方法
对代码进行适度优化，转换为通用函数
/**
* 合并多张图片，返回新的图片
* @param {Array} list 图片url数组
* @param {Number} cwith 画布宽度 默认500
* @param {Number} cheight 画布高度 默认500
*/
function mergeImgs(list, cwith = 500, cheight = 500) {
return new Promise((resolve, reject) => {
const baseList = []
const canvas = document.createElement('canvas')
canvas.width = cwith
canvas.height = cheight * list.length
const context = canvas.getContext('2d')
list.map((item, index) => {
const img = new Image()
img.src = item
// 跨域
img.crossOrigin = 'Anonymous'
img.onload = () => {
context.drawImage(img, 0, cheight * index, cwith, cheight)
const base64 = canvas.toDataURL('image/png')
baseList.push(base64)
if (baseList[list.length - 1]) {
console.log(baseList)
// 返回新的图片
resolve(baseList[list.length - 1])
}
}
})
})
}
const urlList = ['./img/timg%20(1).jpg', './img/timg.jpg']
mergeImgs(urlList ).then(base64 => {
const imgDom = document.createElement('img')
imgDom.src = base64
document.body.appendChild(imgDom)
})运行结果
至此，关于利用js结合Canvas实现多张图片合并为单张的代码方案已阐述完毕，如需了解js canvas图片合并的更多内容，建议查阅本站历史文章或继续浏览后续相关教程，期待大家持续支持本站！