11

Precursor：我知道已经有人问过关于这个主题的一些问题，但似乎没有一个提供直接的纯 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 Web 服务器上，我的所有问题都解决了吗？听说dropbox也可以模拟一个足够近的服务器？

4

2 回答 2

13

如果您正在使用它，则不能使用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" />
于 2013-11-08T22:08:10.660 回答
1

确保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);
于 2019-06-24T08:48:00.583 回答