一劳永逸:是否有或没有一种方法可以使用IE9+处理来自另一个域的图像

Once and for all: Is there or is there not a way to manipulate an image from another domain using IE9+

本文关键字：处理 IE9+ 另一个 图像 可以使 一种 是否 一劳永逸 方法      更新时间：2023-11-17

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

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

因此，要得出结论，有没有办法？

如果你知道一种工作方法，请提供一个例子。提前谢谢。

注：

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

  • 我的最后手段是将图像解码到base64中，并使用JSONP返回，但我希望找到一个解决方案，该解决方案不需要我以文本形式代理图像，从而在我的CDN（和用户的本地缓存）上保存图像的两个副本。

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

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

您还必须在客户端上特别请求跨来源共享。这是通过在html图像对象上设置crossOrigin="anoymous"属性来完成的。大多数浏览器（包括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";

就"一劳永逸"而言。。。这个问题经常被问到，而且还会被问到。

相关文章：