一劳永逸：有没有一种方法可以使用 IE9+ 来处理来自另一个域的图像答案

【问题标题】：Once and for all: Is there or is there not a way to manipulate an image from another domain using IE9+一劳永逸：有没有一种方法可以使用 IE9+ 来处理来自另一个域的图像
【发布时间】：2013-11-29 02:27:09
【问题描述】：

假设我可以在两个域上设置 HTTP 标头，有没有办法使用 CORS（来自另一个域）将图像绘制到 canvas 元素上并使用 IE9 和/提取它的位图还是IE10？

版本 11 之前的 Internet Explorer 不支持 img 元素的 crossOrigin 属性，我无法通过在图像响应调用上设置 Access-Control-Allow-Origin 标头来使其工作。我遇到的所有指南和过去的问题都只提供了这两种方法，所以我找不到适合我的解决方案。

所以要得出结论，有没有办法？

如果您知道一种工作方法，请提供一个示例。提前致谢。

注意事项：

由于需要使用 CDN，我无法代理图像，在这种情况下我必须使用 CORS
我最后的手段是将图像解码为 base64 并使用 JSONP 返回，但我希望找到一个不需要我以文本形式代理图像的解决方案，从而节省两个副本我的 CDN 上的图像（以及用户的本地缓存）。

【问题讨论】：

标签： javascript image internet-explorer canvas cors

【解决方案1】：

绝对可以，你可以跨域从图像中获取rgba图像数据。

正如您所发现的，关键是必须将“其他”域配置为允许访问。该访问可以限制在几个指定的域（白帽访问），或者可以打开它以允许对任何匿名请求进行开放访问。这是一个关于如何在您的服务器上设置跨域访问的链接：http://enable-cors.org/

您还必须在客户端专门请求跨域共享。这是通过在 html Image 对象上设置 crossOrigin="anonymous" 属性来完成的。大多数浏览器（包括 IE9+）都支持跨域请求。

所以，是的……

如果服务器端配置正确且客户端请求正确...您将能够使用 context.getImageData 和 canvas.toDataURL 操作跨域图像。

以下示例代码成功地对图像进行了跨域请求（dropbox.com 已正确设置其服务器标头以允许匿名访问）：

演示：http://jsfiddle.net/m1erickson/Xpy53/#base

// create a JS image object

var XDomainImage=new Image();

// ask the server for anonymous access to this image

XDomainImage.crossOrigin="anonymous";

// when the image is loaded...

XDomainImage.onload=function(){
    canvas.width=XDomainImage.width;
    canvas.height=XDomainImage.height;
    ctx.drawImage(XDomainImage,0,0);

    // use getImageData to grab the pixel data

    var data=ctx.getImageData(50,35,1,1).data;
    var red=data[0];
    var green=data[1];
    var blue=data[2];
    alert("The image pixel at [50,30] is rgb("+red+","+green+","+blue+")");
}

// dropbox has properly set its headers to allow anonymous access

XDomainImage.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

至于“一劳永逸”……这个问题经常被问到，以后还会再问。

【讨论】：

我在 IE10 上打开了你的代码示例，这就是我得到的：“SCRIPT5022: SecurityError show, line 48 character 5”
另外，根据 MSDN，crossOrigin 属性仅在 IE11 上受支持，这可以解释为什么它可以在除 IE10 之外的任何浏览器上工作-msdn.microsoft.com/en-us/library/ie/dn254950(v=vs.85).aspx
能否详细说明XDomainRequest的用法？也许提供一个工作代码示例？那将不胜感激。
这里有一个链接很好地展示了为什么需要 XDomainRequest 以及如何检测对它的需要：docs.kendoui.com/howto/use-cors-with-all-modern-browsers 请务必检查帖子底部附近的此实现代码：github.com/dkastner/jquery.iecors跨度>
使用XDomainRequest 我可以获取图像，但只能作为二进制文件。从我收集的内容来看，responseText 返回给 JavaScript 的字符串将在第一个空值处终止，XDomainRequest 只有一个responseText，没有responseBody。到目前为止，我无法让它工作。