Question

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

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

所以要确定，是否有办法或者没有？

如果您了解工作方法，请提供示例。提前谢谢。

注意：

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

Answer 1

绝对是，您可以跨域扫描图像中的rgba图像数据。

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

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

所以，是的......

如果服务器端配置正确且客户端正在请求...您将能够使用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";

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

一劳永逸：是否存在使用IE9 +从另一个域操纵图像的方法

1 个答案: