Question

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

所以我遇到了这个错误，我试图使用像context.getImageData()之类的东西从画布中获取像素数据，我的确切代码可以看到 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中遇到以下错误：

无法从画布获取图像数据，因为画布已经存在受到跨性别数据的污染。

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

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

我试图在没有服务器的情况下这样做，如果我把它放在我的“默认”godaddy网络服务器上，我的所有问题都解决了吗？我听说传言dropbox还可以模拟服务器足够接近吗？

Answer 1

如果您正在使用file://，则无法使用http://localhost（Chrome允许您覆盖此内容，但我不会推荐它）。

对于本地测试，请使用轻量级服务器，例如Mongoose，以便您使用crossOrigin作为域来测试本地网页。这样可以避免CORS出现问题。

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

DropBox和ImgUrl（我推荐后者仅用于图像）都支持CORS用法，但是您需要在设置源代码之前向图像添加var img = new Image; img.onload = myLoader; img.crossOrigin = ''; ///=anonymous img.src = 'http://imgur.com/....';属性来请求此类用法（或将其包含在HTML中）标记，如果您正在使用它）：

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

或HTML：

{{1}}

Answer 2

在设置图像对象的来源之前，请确保先放置img.setAttribute('crossOrigin', '');。就像这样：

var img = document.createElement("img");
//fix crossorigin here...
img.setAttribute('crossOrigin', '');
//after that put your source
img.src = imageSrcURL;
document.body.appendChild(img);

getImageData跨源错误

2 个答案: