如何修复getImageData（）错误画布已被跨域数据污染？

我的代码在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）来自子域网址

正如其他人所说，您是通过从跨起源域加载来“污染”画布。

https://developer.mozilla.org/zh-CN/docs/HTML/CORS_Enabled_Image

但是，您可以通过简单的设置来防止这种情况：

img.crossOrigin = "Anonymous";

仅当远程服务器适当设置以下标头时，此方法才有效：

Access-Control-Allow-Origin "*"

使用“直接链接”选项时，Dropbox文件选择器就是一个很好的例子。我在oddprints.com上使用它来将图像从远程保管箱图像URL 悬停到我的画布中，然后将图像数据提交回我的服务器。全部用JavaScript

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

这给我

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

您将无法直接从另一台服务器将图像绘制到画布中，然后使用getImageData。这是一个安全问题，画布将被视为“已污染”。

使用PHP将映像副本保存到服务器，然后仅加载新映像是否对您有用？例如，您可以将URL发送到PHP脚本并将其保存到服务器，然后将新文件名返回给javascript，如下所示：

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

  $url=$_GET['url'];

  // prevent hackers from uploading PHP scripts and pwning your system
  if(!@is_array(getimagesize($url))){
    echo "path/to/placeholderImage.png";
    exit("wrong file type.");
  }

  $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中进行这种图像处理。

如果您想使用这种方法，请告诉我是否需要帮助来实施。

edit-1：peeps指出php脚本是公开的，并允许Internet潜在地恶意使用它。有上百万种方法可以解决此问题，最简单的方法之一就是某种形式的URL混淆...我认为安全的php做法值得单独使用google; P

edit-2：根据普遍的需求，我添加了一个检查以确保它是一个图像而不是一个php脚本（来自：PHP检查文件是否是一个图像）。

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

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

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

您正在通过跨源域加载来“污染”画布。查看此MDN文章：

https://developer.mozilla.org/zh-CN/docs/HTML/CORS_Enabled_Image

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

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

请注意，我在使用MAC。

我通过全局安装http-server来解决这个问题。https://www.npmjs.com/package/http-server

脚步：

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

PS：我假设您已经安装了节点，否则您将无法获得运行非常快的npm命令。

正如matt burns在他的回答中所说，您可能需要在托管问题映像的服务器上启用CORS。

如果服务器是Apache，则可以通过将以下代码段（从此处开始）添加到VirtualHost配置或.htaccess文件中来完成：

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

...如果将其添加到VirtualHost，您可能还需要重新加载Apache的配置（例如，sudo service apache2 reload如果Apache在Linux服务器上运行）

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

我今天遇到了同样的问题，并通过下面的代码解决了。

html代码：

<div style='display: none'>
  <img id='img' src='img/iak.png' width='600' height='400' />
</div>
<canvas id='iak'>broswer don't support canvas</canvas>

js代码：

var canvas = document.getElementById('iak')
var iakImg = document.getElementById('img')
var ctx = canvas.getContext('2d')
var image = new Image()
image.src=iakImg.src
image.onload = function () {
   ctx.drawImage(image,0,0)
   var data = ctx.getImageData(0,0,600,400)
}

像上面的代码，并且没有跨域问题。

我遇到了同样的问题，对我来说，只需串联 https:${image.getAttribute('src')}