js verwendet Canvas, um mehrere Bilder in einem Implementierungscode zusammenzuführen

Funktion mergeImgs(Liste) {
 const imgDom = document.createElement('img')
 Dokument.Body.AnhängenUntergeordnetesElement(imgDom)

 const canvas = document.createElement('canvas')
 Leinwandbreite = 500
 Leinwandhöhe = 500 * Listenlänge
 const Kontext = Canvas.getContext('2d')

 Liste.Map((Element, Index) => {
 const img = neues Bild()
 img.src = Artikel
 // Domänenübergreifend img.crossOrigin = "Anonym"
 
 img.onload = () => {
  Kontext.drawImage(Bild, 0, 500 * Index, 500, 500)
  const base64 = canvas.toDataURL('bild/png')
  imgDom.setAttribute('src', base64)
  // console.log(Basisliste)
 }
 })
}

const urlList = ['./img/timg%20(1).jpg', './img/timg.jpg']
Bilder zusammenführen(URL-Liste)

/**
 * Mehrere Bilder zusammenführen und ein neues Bild zurückgeben * @param {Array} Liste Bild-URL-Array * @param {Number} cwith Die Leinwandbreite beträgt standardmäßig 500
 * @param {Number} cheight Die Standardhöhe der Leinwand beträgt 500
 */
Funktion mergeImgs(Liste, cwith = 500, cheight = 500) {
 returniere neues Promise((lösen, ablehnen) => {
 const Basisliste = []

 const canvas = document.createElement('canvas')
 canvas.width = cmit
 Leinwandhöhe = Leinwandhöhe * Listenlänge
 const Kontext = Canvas.getContext('2d')

 Liste.Map((Element, Index) => {
  const img = neues Bild()
  img.src = Artikel
  // Domänenübergreifend img.crossOrigin = "Anonym"

  img.onload = () => {
  Kontext.drawImage(Bild, 0, cheight * Index, cwith, cheight)
  const base64 = canvas.toDataURL('bild/png')
  Basisliste.push(base64)

  if (Basisliste[Listenlänge - 1]) {
   console.log(Basisliste)
   //Gib das neue Bild zurück: 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
	Dokument.Body.AnhängenUntergeordnetesElement(imgDom)
})