IE10 和 Image/Canvas 的跨域资源共享 (CORS) 问题

IE10 and Cross-origin resource sharing (CORS) issues with Image / Canvas(IE10 和 Image/Canvas 的跨域资源共享 (CORS) 问题)

问题描述

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

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

我们有一个使用多个域并读取图像数据的 JS/HTML5 应用程序.我们正在从另一个域加载 JS 中的图像，将图像 imageDraw()ing 到我们的画布，然后在画布上使用 getImageData.(我们没有使用跨域 XMLHttpRequests).为此，我们必须在提供图像的服务器上设置响应标头:

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

并在加载前在 JS 中的图像对象上设置这个:

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

image.crossOrigin = '匿名';//也试过小写

这适用于所有新浏览器，除了 IE10，当我们尝试读取数据时会引发安全错误.

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

IE10 是否需要做更多工作才能将这些跨域图像视为无污染?

更新:

我注意到上一个问题的这个答案.有趣的是 this JSFiddle 也不适用于 IE10 - 任何人都可以确认这不起作用在他们的 IE10 中?

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?

推荐答案

不幸的是，即使正确设置了 CORS 标头，IE10 仍然是唯一不支持绘制到 Canvas 的图像的 CORS 的流行浏览器.但是通过 XMLHttpRequest 可以解决这个问题:

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 和 Image/Canvas 的跨域资源共享 (CORS) 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！