0

以下函数应获取图像数据（使用context.getImageData()现有画布，包含图像（已加载到网页上）和页面上未显示的第二个画布。

第一个画布的数据按预期“获得”，并alert(data1.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*/
}

在函数获取图像数据后，它将根据操作值将它们传递给另一个函数。（它将与、或、异或或不将像素数据数组的内容放在一起）

编辑：这是我收到的错误消息：“未捕获的 SecurityError：无法在 'CanvasRenderingContext2D' 上执行 'getImageData'：画布已被跨域数据污染。”

4

1 回答 1

2

您的代码没有任何问题，但它失败了，因为源图像（operand.src）位于不同的域中，并且不允许跨域操作。更具体地说，您无法从画布中获取图像数据，在该画布上您绘制了具有不同来源的图像。

不幸的是，除非您有权访问源图像来自的服务器，否则没有解决方案。服务器需要像这样设置 HTTP 标头：

Access-Control-Allow-Origin: *

而且，在客户端，您需要在绘制到隐藏的画布之前允许跨源源：

operand.crossOrigin = 'anonymous';

设置这些值（* 和 'anonymous'）会完全禁用跨域检查，这可能不是您想要的。您可以设置与您要使用的特定域匹配的值。

于 2014-11-27T17:43:14.397 回答