js使用Canvas将多张图片合并成一张的实现代码

解决方案

function mergeImgs(list) {const imgDom = document.createElement(\'img\')document.body.appendChild(imgDom)const canvas = document.createElement(\'canvas\')canvas.width = 500canvas.height = 500 * list.lengthconst 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 = cwithcanvas.height = cheight * list.lengthconst 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 = base64document.body.appendChild(imgDom)})

效果