无法从画布获取图像数据答案

【问题标题】：Cannot get Image Data from a canvas无法从画布获取图像数据
【发布时间】：2014-11-27 17:15:45
【问题描述】：

以下函数应获取图像数据（使用 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*/
}

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

编辑：这是我收到的错误消息：“Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': canvas has been tainted by cross-origin data.”

【问题讨论】：

知道你得到什么错误会很有帮助......控制台说什么？我怀疑这是一个跨域问题
哦，对了，我忘记了错误，因为我一直在使用记事本++。在 chrome 开发人员的控制台上，它显示“未捕获的 SecurityError：无法在 'CanvasRenderingContext2D' 上执行 'getImageData'：画布已被跨域数据污染。”

标签： javascript canvas getimagedata

【解决方案1】：

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

不幸的是，除非您有权访问源图像所在的服务器，否则无法解决此问题。服务器需要像这样设置一个 HTTP 标头：

Access-Control-Allow-Origin: *

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

operand.crossOrigin = 'anonymous';

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

【讨论】：