如何修复getImageData()错误画布受到跨源数据的污染？

Question

我的代码在我的localhost上运行得很好,但是它在网站上没有运行.

我从控制台得到了这个错误.getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

我的部分代码:

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

注意:我的图片网址(src)来自子网址网址

Answer 1

正如其他人所说的那样,你通过从一个交叉起源域加载来"污染"画布.

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

但是,您可以通过简单设置来阻止这种情况:

img.crossOrigin = "Anonymous";

仅当远程服务器正确设置以下标头时,此方法才有效:

Access-Control-Allow-Origin "*"

The Dropbox file chooser when using the "direct link" option is a great example of this. I use it on oddprints.com to hoover up images from the remote dropbox image url, into my canvas, and then submit the image data back into my server. All in javascript :)

Answer 2

我发现我必须使用.setAttribute('crossOrigin', '')并且必须在URL的查询字符串中附加时间戳,以避免缺少Access-Control-Allow-Origin标题的304响应.

这给了我

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');

Answer 3

您将无法直接从另一台服务器将图像绘制到画布中然后使用getImageData.这是一个安全问题,画布将被视为"污点".

您是否可以使用PHP将图像副本保存到服务器,然后只加载新图像？例如,您可以将URL发送到PHP脚本并将其保存到您的服务器,然后将新文件名返回到您的javascript,如下所示:

<?php //The name of this file in this example is imgdata.php

  $url=$_GET['url'];
  $img = file_get_contents($url);
  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

你将PHP脚本与一些像这样的ajax javascript一起使用:

xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
  if(xi.readyState==4 && xi.status==200) {
    img=new Image;
    img.onload=function(){ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src=xi.responseText;
  }
}

如果你getImageData之后在画布上使用它,它将正常工作.

或者,如果您不想保存整个图像,可以将x和y坐标传递给PHP脚本并计算该侧的像素rgba值.我认为在PHP中进行这种图像处理有很好的库.

如果您想使用此方法,请告诉我您是否需要帮助实施它.

Answer 4

在本地工作时，添加服务器。

我在本地工作时遇到了类似的问题。您的 URL 将是本地文件的路径，例如file:///Users/PeterP/Desktop/folder/index.html.

请注意，我使用的是 Mac。

我通过全局安装 HTTP 服务器解决了这个问题。我使用了https://www.npmjs.com/package/http-server

脚步

1. 全局安装：npm install http-server -g
2. 运行服务器：http-server ~/Desktop/folder/

这些步骤假设您已经node安装，否则您将无法运行npm命令。

Answer 5

我的问题太混乱了，我只是对图像进行了 Base64 编码，以确保不会出现任何 CORS 问题

Answer 6

我在Chrome本地测试代码时看到了这个错误。我切换到Firefox，我不再看到错误。也许切换到另一个浏览器是一个快速解决方案。

如果您使用的是第一个答案中给出的解决方案，请确保img.crossOrigin = "Anonymous";在声明img变量后立即添加（例如。var img = new Image();）。

Answer 7

您的问题是您加载外部图像，即来自另一个域的图像。当您尝试访问画布上下文的任何数据时，这会导致安全错误。