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

Question

我的代码在我的本地主机上运行良好，但在站点上却无法运行。

我从控制台收到此错误，对于这一行 .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;
    }

注意：我的图片 url (src) 来自子域 url

Answer 1

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

Answer 2

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

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

Answer 3

您将无法将图像直接从另一台服务器绘制到画布中，然后使用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 脚本已暴露并允许互联网恶意使用它。有一百万种方法可以处理这个问题，其中最简单的一种是某种 URL 混淆......我认为安全的 php 实践值得一个单独的谷歌；P

edit-2：根据大众的需求，我添加了一个检查以确保它是图像而不是 php 脚本（来自：PHP check if file is an image）。

Answer 4

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

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

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

img.crossOrigin = "Anonymous";

这仅在远程服务器正确设置以下标头时才有效：

Access-Control-Allow-Origin "*"

使用“直接链接”选项时的Dropbox file chooser 就是一个很好的例子。我在oddprints.com 上使用它来将远程Dropbox 图像URL 中的图像存储到我的画布中，然后将图像数据提交回我的服务器。全部在javascript中

Answer 5

我发现我必须使用 .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 6

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

如果服务器是 Apache，这可以通过将以下 sn-p（来自 here）添加到您的 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 服务器上运行）

Answer 7

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

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)
}

代码如上，不存在跨域问题。

Answer 8

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

Answer 9

在本地工作时添加服务器

我在本地工作时遇到了类似的问题。您的 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 命令。

Answer 10

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

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

Answer 11

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

Answer 12

您可以将图像转换为数据字符串，以使用图像源而不是实际图像源。

[https://www.base64-image.de/][1] 将图像转换为数据字符串。 从上述网站转换和复制字符串数据。 设置 image.src = .

Answer 13

解决方法， 将源图片 URL 转换为 Base64 数据并分配给 img

例如，使用 Axios

const getBase64 = async(url)=>{
      try {
        let image = await axios.get(url, { responseType: 'arraybuffer' });
        let raw = Buffer.from(image.data).toString('base64');
        return "data:" + image.headers["content-type"] + ";base64,"+raw;
      } catch (error) {
          console.log(error)
      } 
}

var image = new Image()

image.src=getBase64(url)

canvas 没有跨域依赖