javascript - IE10 and Cross-origin resource sharing (CORS) issues with Image / Canvas

Question

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?

Answer 1

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();