getImageData 跨域错误 [英] getImageData cross-origin error

问题描述

Precursor:我知道已经有一些关于这个主题的问题，但似乎没有一个提供直接的 JavaScript 解决方案.

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.

所以我遇到了这个错误，我试图使用诸如 context.getImageData() 之类的东西从画布中获取像素数据，可以看到我的确切代码 此处 或以下:

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 here or below:

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

I get the following errors in Chrome:

无法从画布中获取图像数据，因为画布已被受到跨源数据的污染.

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

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

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.

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

Using local images only is not a problem, but when trying that, I got the same error!

我正在尝试在没有服务器的情况下执行此操作，如果我将它放在我的默认"godaddy Web 服务器上，我的所有问题都解决了吗?我听说有传言说 Dropbox 也可以模拟足够接近的服务器?

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?

推荐答案

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

You can't use file:// if you're using that (Chrome allow you to override this but I won't recommend it).

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

For local testing use a light-weight server such as Mongoose which allow you use http://localhost as a domain to test your local pages. This way you avoid problems with CORS.

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

If you need to host images on a different domain you need to make sure they support cross-origin usage.

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

DropBox and ImgUrl (I recommend the latter for just images) both support CORS usage, but you need to request such usage by adding the crossOrigin property to your image before setting the source (or include it in the HTML tag if you're using that):

var img = new Image;

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

或在 HTML 中:

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

这篇关于getImageData 跨域错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！