javascript - 一劳永逸 : Is there or is there not a way to manipulate an image from another domain using IE9+

Question

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

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

那么，到底有没有办法呢？

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

注释:

• 我无法代理图像，因为需要使用 CDN，在这种情况下我必须使用 CORS

• 我的最后手段是将图像解码为 base64 并使用 JSONP 返回它，但我希望找到一种解决方案，不需要我以文本形式代理图像，从而节省两个副本我的 CDN 上的图像(以及用户的本地缓存)。

Answer 1

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

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

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

所以，是的...

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

下面是成功对图像发出跨源请求的示例代码(dropbox.com 已正确设置其服务器 header 以允许匿名访问):

演示: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";

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