IE10和跨源资源共享（CORS）问题与图像/画布 [英] IE10 and Cross-origin resource sharing (CORS) issues with Image / Canvas

问题描述

我的印象是，Internet Explorer 10完全支持CORS，但现在我不确定。

我们有一个使用多个域的JS / HTML5应用程序，并读取图像数据。我们正在从另一个域中的JS加载图像，imageDraw（）将图像放到我们的画布上，然后在画布上使用getImageData。 （我们不使用跨域XMLHttpRequests）。为了这个工作，我们不得不在服务于图像的服务器上设置响应头：

  access-control-allow-origin ：* 
 access-control-allow-credentials：true 
  

加载之前的JS中的对象：

image.crossOrigin ='Anonymous' //也尝试小写字母

除了IE10外，所有新浏览器都可正常使用在尝试读取数据时会抛出安全性错误。

  SCRIPT5022：SecurityError 
  

有没有更多的需要做的IE10来处理这些跨域图像不污染？

更新：

我注意到了此回答到上一个问题。 有趣的是，这个JSFiddle 也不适用于IE10 - 任何人都可以确认这在IE10中不起作用？

  var xhr = new XMLHttpRequest 
 xhr.onload = function（）{
 var url = URL.createObjectURL（this.response），img = new Image（）; 
 img.onload = function（）{
 //这里你可以使用img绘制画布和处理
 // ... 
 //不要忘记释放当你完成时，你可以记住内存（你可以在图像绘制到画布上时立即这样做）
 URL.revokeObjectURL（url）; 
}; 
 img.src = url; 
}; 
 xhr.open（'GET'，url，true）; 
 xhr.responseType ='blob'; 
 xhr.send（）; 
  

I was under the impression that Internet Explorer 10 fully supported CORS, but now I'm not sure.

We have a JS/HTML5 App that uses multiple domains, and reads image data. We are loading images in the JS from another domain, imageDraw()ing the image to our canvas, and then using getImageData on the canvas. (We aren't using cross-domain XMLHttpRequests). For this to work we have had to set response headers on the server that's serving the images:

access-control-allow-origin: *
access-control-allow-credentials: true

And set this on the image object in the JS before loading:

image.crossOrigin = 'Anonymous'; //Also tried lowercase

This is working fine for all new browsers, apart from IE10 which is throwing security errors when we try to read the data.

SCRIPT5022: SecurityError

Is there something more that needs to be done for IE10 to treat these cross domain images as not tainting?

UPDATE:

I noticed this answer to a previous question. Interestingly this JSFiddle also does not work for IE10 - can anyone confirm that this does not work in their IE10?

解决方案

Unfortunately, IE10 still remains the only popular browser that doesn't support CORS for image drawn to Canvas even when CORS headers are properly set. But there is workaround for that via XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response), img = new Image();
    img.onload = function () {
        // here you can use img for drawing to canvas and handling
        // ...
        // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas)
        URL.revokeObjectURL(url);
    };
    img.src = url;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();

这篇关于IE10和跨源资源共享（CORS）问题与图像/画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！