无法从画布获取图像数据

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'）将完全禁用跨域检查，这可能不是您想要的。 您可以设置与您要使用的特定域匹配的值。