Question

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

第一幅画布＆＃39;数据是＆＃34;得到＆＃34;正如预期的那样，alert(data1.data.length)弹出一个合理的数字。然而第二个画布＆＃39;数据不是＆＃34;得到＆＃34;得到了，函数在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像素数据阵列的内容放在一起）

编辑：这是我收到的错误消息：＆＃34;未捕获的SecurityError：无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：画布已被跨源数据污染。＆＃34;

Answer 1

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

不幸的是，除非您可以访问源图像来自的服务器，否则无法解决此问题。服务器需要像这样设置HTTP标头：

Access-Control-Allow-Origin: *

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

operand.crossOrigin = 'anonymous';

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

无法从画布中获取图像数据

1 个答案: