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中有以下错误：

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

还有一个安全错误。我不想做服务器更改，也不想用奇怪的指令启动铬。我觉得我必须在JavaScript里做点什么。

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

我试图在没有服务器的情况下做这件事，如果我把它放在我的“默认”godaddy服务器上，我的问题都解决了吗？我听说dropbox也能模拟一个足够近的服务器？

Answer 1

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

对于本地测试，请使用轻量级服务器(如猫鼬 )，它允许您使用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" />

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);