我可以在 javascript 中組合畫布和圖像元素嗎？

Question

我想將我的“圖像”變量轉換為畫布類型，並將其與“畫布”變量（框）元素結合以創建另一個畫布元素。 這個輸出畫布將在后面有圖像，在前面有框的畫布。 我指的是http://jsfiddle.net/bnwpS/878/

HTML：

<div id="output"></div>

Javascript：

const container = document.getElementById("output");
const image = await faceapi.bufferToImage(imageUpload.files[0]);
const canvas = faceapi.createCanvasFromMedia(image);
container.append(image);
container.append(canvas);

我嘗試過一件事但沒有成功：

1. 使用 createElement('canvas') 創建另一個畫布元素，然后使用 drawImage() 在其上繪制圖像和畫布，但結果顯示為黑色。

Answer 1

嘗試使用此函數將圖像寫入畫布：

function writeImageToCanvas(image, cvs) {
  const img = document.createElement('img');
  return new Promise(resolve => {
    img.onload = () => {
      cvs.width = img.width;
      cvs.height = img.height;
      const ctx = cvs.getContext('2d');
      ctx.drawImage(img, 0, 0);
      resolve();
    };
    img.src = image.src;
  });
}

請注意，這是一個異步函數，因此需要使用writeImageToCanvas(img,cvs).then(...或者使用 await 並將調用函數標記為異步。

Answer 2

img1.onload = () => {
  canvas.width = img1.width;
  canvas.height = img1.height;
  img2.src = 'img2.png';
};

img2.onload = () => {
  context.drawImage(img1, 0, 0);
  context.drawImage(img2, 0, 0);

  const imgUrl = canvas.toDataURL('image/jpeg');
  this.selectedImg = imgUrl;
  // convert canvas to file format
  canvas.toBlob((blob: any) => {
    let file = new File([blob], image.name, { type: 'image/jpeg' });
    console.log(file);
  }, 'image/jpeg');
};
img1.src = 'img1.png';

摘自https://youtu.be/th8l_l_WA3k