問題描述

我的印象是 Internet Explorer 10 完全支持 CORS，但現(xiàn)在我不確定了.

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

我們有一個使用多個域并讀取圖像數(shù)據(jù)的 JS/HTML5 應(yīng)用程序.我們正在從另一個域加載 JS 中的圖像，將圖像 imageDraw()ing 到我們的畫布，然后在畫布上使用 getImageData.(我們沒有使用跨域 XMLHttpRequests).為此，我們必須在提供圖像的服務(wù)器上設(shè)置響應(yīng)標(biāo)頭:

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 中的圖像對象上設(shè)置這個:

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

image.crossOrigin = '匿名';//也試過小寫

這適用于所有新瀏覽器，除了 IE10，當(dāng)我們嘗試讀取數(shù)據(jù)時會引發(fā)安全錯誤.

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?

推薦答案

不幸的是，即使正確設(shè)置了 CORS 標(biāo)頭，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();

這篇關(guān)于IE10 和 Image/Canvas 的跨域資源共享 (CORS) 問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！