假设我可以在两个域上设置 HTTP header ,有没有办法使用 CORS(来自另一个域)将图像绘制到 canvas
元素上并提取它的使用 IE9 和/或 IE10 的位图?
版本 11 之前的 Internet Explorer 不支持 img
元素的 crossOrigin
属性,我无法仅通过设置 使其工作图像响应调用上的 Access-Control-Allow-Origin
header 。我遇到的所有指南和过去的问题都只提供了这两种方法,因此我找不到适合我的解决方案。
那么,到底有没有办法呢?
如果您知道工作方法,请提供示例。提前致谢。
注释:
我无法代理图像,因为需要使用 CDN,在这种情况下我必须使用 CORS
我的最后手段是将图像解码为 base64 并使用 JSONP 返回它,但我希望找到一种解决方案,不需要我以文本形式代理图像,从而节省两个副本我的 CDN 上的图像(以及用户的本地缓存)。
最佳答案
绝对可以,您可以跨域从图像中获取 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";
至于“一劳永逸”……这个问题经常被问到,而且还会再次被问到。
关于javascript - 一劳永逸 : Is there or is there not a way to manipulate an image from another domain using IE9+,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20263006/