getImageData跨源错误

Question

前言:我知道已经有一些关于这个主题的问题,但是它们似乎都没有提供直接的JavaScript解决方案.

所以我遇到了这个错误,我试图从画布中使用类似的东西获取像素数据context.getImageData(),我的确切代码可以在这里或下面看到:

<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中遇到以下错误:

无法从画布获取图像数据,因为画布已被跨源数据污染.

然后是安全错误.我不想更改服务器或使用奇怪的指令启动chrome.我觉得我必须在JavaScript中做些什么.

仅使用本地图像不是问题,但在尝试时,我得到了同样的错误!

我试图在没有服务器的情况下这样做,如果我把它放在我的"默认"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" />