~~~ // 創建新的Image對象 let image1 = new Image(); let image2 = new Image(); image1.setAttribute("crossOrigin",'Anonymous') image2.setAttribute("crossOrigin",'Anonymous') // 設置圖片的源 image1.src = 'https://cdnf.nur.cn/uploadfile/2023/1121/112100391870300025525995.jpgthumb_210_150.jpg'; image2.src = 'https://cdnf.nur.cn/uploadfile/2023/1119/111909093193100018754621.jpgthumb_210_150.jpg'; // 等待兩個圖片都加載完成 Promise.all([ new Promise((resolve, reject) => { image1.onload = resolve; image1.onerror = reject; }), new Promise((resolve, reject) => { image2.onload = resolve; image2.onerror = reject; }), ]).then(() => { // 創建一個canvas元素 let canvas = document.createElement('canvas'); // 設定canvas的寬和高 canvas.width = Math.max(image1.width, image2.width); canvas.height = image1.height + image2.height; // 獲取2D渲染上下文 let ctx = canvas.getContext('2d'); // 繪制兩個圖片 ctx.drawImage(image1, 0, 0); ctx.drawImage(image2, 0, image1.height); // 將合并后的圖片轉為DataURL let imgDataUrl = canvas.toDataURL('image/png'); // 在頁面中顯示合并后的圖片 let img = document.createElement('img'); img.src = imgDataUrl; document.body.appendChild(img); }).catch(err => { console.error('Error loading images', err); }); ~~~