無法從畫布獲取圖像數據

Question

以下函數應從存在的畫布上獲取圖像數據（使用context.getImageData() ，其中包含圖像（已加載到網頁上）和第二個未顯示在頁面上的畫布。

如預期的那樣，第一個畫布的數據將“獲得”，並且將彈出alert(data1.data.length) ，並顯示一個合理的數字。 但是，第二個畫布的數據不是“獲取”的，並且該函數在alert(data2.data.length);之前中斷alert(data2.data.length); 線。 那是似乎不能在整個功能中起作用的唯一一行，這是我的問題。

function operateImage(){

    var operand = new Image();
    var data1, data2;
    //exisiting canvas
    var c =document.getElementById("edit_canvas");
    var ctx=c.getContext("2d");

    var operation = document.getElementById("operation").value;

    //make a new temporary canvas and store the input image
    var hiddenCanvas = document.createElement('canvas');
    var hiddenCtx = hiddenCanvas.getContext('2d');
    operand.src = document.getElementById("operation_image").value; 
    hiddenCanvas.width = operand.width;
    hiddenCanvas.height = operand.height;

    hiddenCtx.drawImage(operand,0,0);
    //get image data objects from both canvases
    data1 = ctx.getImageData(0,0,c.width,c.height);
    alert(data1.data.length);
    data2 = hiddenCtx.getImageData(0,0,hiddenCanvas.width,hiddenCanvas.height);
    alert(data2.data.length);

    /*pass the two image data objects to another function for processing*/
}

函數獲取圖像數據后，它將根據操作值將它們傳遞給另一個函數。 （它將AND，OR，XOR或NOT像素數據數組的內容放在一起）

編輯：這是一條錯誤消息，我得到：“ Uncaught SecurityError：無法在'CanvasRenderingContext2D'上執行'getImageData'：畫布已被跨域數據污染。”

Answer 1

您的代碼沒有任何問題，但是由於源映像（operand.src）在不同的域上並且不允許跨域操作而失敗。 更具體地說，您不能從繪制了不同原點圖像的畫布上獲取ImageData。

不幸的是，除非您有權訪問源映像所在的服務器，否則就沒有解決方案。 服務器需要這樣設置HTTP標頭：

Access-Control-Allow-Origin: *

並且，在客戶端， 在繪制到隱藏的畫布之前 ，您需要允許跨域源：

operand.crossOrigin = 'anonymous';

設置這些值（*和'anonymous'）將完全禁用跨域檢查，這可能不是您想要的。 您可以設置與您要使用的特定域匹配的值。