js uses Canvas to merge multiple pictures into one implementation code

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
 // Cross-domain 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 )

/**
 * Merge multiple images and return a new image * @param {Array} list Image url array * @param {Number} cwith Canvas width defaults to 500
 * @param {Number} cheight The default height of the canvas is 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
  // Cross-domain 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)
   // Return the new image 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)
})