javascript getImageData 跨域错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19869150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getImageData cross-origin error
提问by Shaun314
Precursor: I know there have been a few questions already asked about this topic, but none of them seem to offer a straight JavaScript only solution.
Precursor：我知道已经有一些关于这个主题的问题，但似乎没有一个提供直接的 JavaScript 解决方案。
So I ran into this error where I am trying to get the pixel data from a canvas using something like context.getImageData(), my exact code can been seen hereor below:
所以我遇到了这个错误，我试图使用类似的东西从画布中获取像素数据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);
}
I get the following errors in Chrome:
我在 Chrome 中收到以下错误：
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
无法从画布获取图像数据，因为画布已被跨域数据污染。
and then a security error as well. I don't want to make server changes or start chrome with a weird instruction thing. I feel like there has to be something I can do in JavaScript.
然后也是一个安全错误。我不想更改服务器或使用奇怪的指令启动 chrome。我觉得必须有一些我可以用 JavaScript 做的事情。
Using local images only is not a problem, but when trying that, I got the same error!
仅使用本地图像不是问题，但是在尝试时，我遇到了同样的错误！
I am trying to do this without a server, if I put this on my "default" godaddy web server, are all my problems solved? I heard rumors dropbox could also simulate a server close enough?
我正在尝试在没有服务器的情况下执行此操作，如果我将它放在我的“默认”godaddy Web 服务器上，我的所有问题都解决了吗？我听说有传言说 Dropbox 也可以模拟足够接近的服务器？
回答by
You can't use file://if you're using that (Chrome allow you to override this but I won't recommend it).
file://如果你正在使用它，你就不能使用（Chrome 允许你覆盖它，但我不会推荐它）。
For local testing use a light-weight server such as Mongoosewhich allow you use http://localhostas a domain to test your local pages. This way you avoid problems with CORS.
对于本地测试，请使用诸如Mongoose 之类的轻量级服务器，它允许您将其http://localhost用作域来测试您的本地页面。这样您就可以避免 CORS 出现问题。
If you need to host images on a different domain you need to make sure they support cross-origin usage.
如果您需要在不同的域上托管图像，则需要确保它们支持跨域使用。
DropBox and ImgUrl (I recommend the latter for just images) both support CORS usage, but you need to request such usage by adding the crossOriginproperty to your image before setting the source (or include it in the HTML tag if you're using that):
DropBox 和 ImgUrl（我推荐后者仅用于图像）都支持 CORS 使用，但您需要crossOrigin在设置源之前通过将属性添加到图像来请求此类使用（如果您正在使用它，或者将其包含在 HTML 标记中） ：
var img = new Image;
img.onload = myLoader;
img.crossOrigin = ''; ///=anonymous
img.src = 'http://imgur.com/....';
or in HTML:
或在 HTML 中：
<img src="..." alt="" crossOrigin="anonymous" />
回答by Sander Dongelmans
Make sure you put the img.setAttribute('crossOrigin', '');before you set the source of your image object. just like this:
确保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);
