無法在 javascript 中將圖像繪制到 canvas

Question

我試圖在將輸入圖像保存到數據庫之前將水印圖像放在輸入圖像上。 我正在使用 canvas 來執行此操作，然后將 canvas 轉換回 blob，但是當我引用項目本地文件目錄中的水印圖像以繪制到 canvas 時，我得到了一個“可能未導出的畫布”。 控制台中的錯誤。

  // Read input file
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {

// Create canvas & calculate Stamp size and position
const canvas = document.createElement("canvas");
canvas.width = canvasSize.width;
canvas.height = canvasSize.height;
var calcW = canvasSize.width/2;
var calcH = calcW/2.16;
var calcX = (canvasSize.width - calcW)/2;
var calcY = (canvasSize.height - calcH)/2;

// Load input image into canvas
const img = document.createElement("img");
img.src = reader.result;
img.onload = () => {
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  //Load & draw the Stamp image
  const mark = new Image();
  mark.src = 'assets/img/compliant.png'; // <<TAINTED ASSET?
  mark.onload = () => {
    ctx.drawImage(mark, calcX,calcY,calcW,calcH);

    // Convert to blob and get URL
    canvas.toBlob((canvasBlob) => {
      const newImg = document.createElement("img"),
      url = URL.createObjectURL(canvasBlob);

      newImg.onload = function () {
        //Destroy objecturl after image loading
        URL.revokeObjectURL(url);
      };

      // Show stamped image
      newImg.src = url;
      window.open(url);
    });
  };
};
};
});

Answer 1

你必須使用 img.crossOrigin='anonymous'; 在您要操作的每個圖像上（繪制 canvas，轉換為數組緩沖區……這是為了防止您操作潛在的私有用戶數據） https://developer.mozilla.org/en-US/docs/Web/HTML /元素/視頻#attr-crossorigin