jsはCanvasを使用して複数の画像を1つの実装コードにマージします

関数 mergeImgs(リスト) {
 const imgDom = document.createElement('img')
 document.body.appendChild(画像Dom)

 const キャンバス = document.createElement('キャンバス')
 キャンバス幅 = 500
 キャンバスの高さ = 500 * リストの長さ
 定数コンテキスト = canvas.getContext('2d')

 リスト.map((項目, インデックス) => {
 const img = 新しい画像()
 img.src = アイテム
 // クロスドメイン img.crossOrigin = 'Anonymous'
 
 img.onload = () => {
  context.drawImage(画像, 0, 500 * インデックス, 500, 500)
  const base64 = canvas.toDataURL('image/png')
  imgDom.setAttribute('src', base64)
  // コンソール.log(ベースリスト)
 }
 })
}

定数urlList = ['./img/timg%20(1).jpg', './img/timg.jpg']
画像をマージします(urlList)

/**
 * 複数の画像を結合して新しい画像を返します * @param {Array} list 画像の URL 配列 * @param {Number} cwith キャンバスの幅はデフォルトで 500 です
 * @param {Number} cheight キャンバスのデフォルトの高さは500です
 */
関数 mergeImgs(リスト、cwith = 500、cheight = 500) {
 新しい Promise を返します ((resolve, reject) => {
 定数ベースリスト = []

 const キャンバス = document.createElement('キャンバス')
 キャンバス幅 = cwith
 キャンバスの高さ = 高さ * リストの長さ
 定数コンテキスト = canvas.getContext('2d')

 リスト.map((項目, インデックス) => {
  const img = 新しい画像()
  img.src = アイテム
  // クロスドメイン img.crossOrigin = 'Anonymous'

  img.onload = () => {
  context.drawImage(画像、0、高さ * インデックス、高さ、高さ)
  const base64 = canvas.toDataURL('image/png')
  baseList.push(base64)

  （baseList[リストの長さ - 1]）の場合{
   コンソール.log(ベースリスト)
   // 新しい画像を返すresolve(baseList[list.length - 1])
  }
  }
 })
 })
}

定数urlList = ['./img/timg%20(1).jpg', './img/timg.jpg']
mergeImgs(urlList).then(base64 => {
	const imgDom = document.createElement('img')
	imgDom.src = base64
	document.body.appendChild(画像Dom)
})