javascript - getImageData 跨源错误

Question

先行者:我知道已经有人问过关于这个主题的几个问题，但似乎没有一个提供直接的纯 JavaScript 解决方案。

所以我在尝试使用context.getImageData()之类的东西从 Canvas 获取像素数据时遇到了这个错误，可以看到我的确切代码 here 或以下:

<canvas id="imageCanvas" width="600" height="800"></canvas>

// Load Image
var canvas = document.getElementById('imageCanvas');

var image = new Image();
image.src = 'http://emoticons.pw/emoticons/emoticon-faces-002-medium.png';
image.onload = function() {

    width=image.width;
    height=image.height;

    var context = canvas.getContext('2d');
    context.fillStyle="#024359"; // canvas background color
    context.fillRect(0, 0, width, height);
    context.drawImage(this,0,0);

    imageData = context.getImageData(0,0,width, height); // PROBLEM HERE

    context.putImageData(imageData, 0, 0);
}

我在 Chrome 中收到以下错误:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

然后还有一个安全错误。我不想更改服务器或使用奇怪的指令启动 chrome。我觉得我必须用 JavaScript 做一些事情。

只使用本 map 片没有问题，但尝试时，我得到了同样的错误!

我正在尝试在没有服务器的情况下执行此操作，如果我将它放在我的“默认”godaddy 网络服务器上，我所有的问题都解决了吗？我听说 dropbox 也可以模拟一个足够接近的服务器？

Answer 1

你不能使用 file:// 如果你正在使用它(Chrome 允许你覆盖它，但我不推荐它)。

对于本地测试，使用轻量级服务器，例如 Mongoose它允许您使用 http://localhost 作为域来测试您的本地页面。这样您就可以避免 CORS 出现问题。

如果您需要在不同的域上托管图像，您需要确保它们支持跨域使用。

DropBox 和 ImgUrl(我推荐后者只用于图像)都支持 CORS 使用，但您需要通过在设置源(或包含它)之前将 crossOrigin 属性添加到您的图像来请求这种使用在 HTML 标记中(如果您使用的话)):

var img = new Image;

img.onload = myLoader;
img.crossOrigin = '';              ///=anonymous
img.src = 'http://imgur.com/....';

或在 HTML 中:

<img src="..." alt="" crossOrigin="anonymous" />