Canvas.toDataURL() working in all browsers except IE10

Question

I\'m working on a project that uses a canvas to automatically crop an image, then return its data URL. It uses images from an external server, which has the appropriate CORS

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 even without proxying image on server-side:

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response);
    img.src = url;

    // 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);
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();

Answer 2

I don't believe IE10 has CORS support for images. This MDN article seems to back that up.

As the article states:

Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.

So, it looks like you'll have to proxy the image from the same origin/domain as the one hosting the code in question before attempting to do this, at least for IE10 and Opera.

To deal with browsers that do not have CORS support for images, you'll need to proxy the image server-side. You can do this pretty easily by sending the source of the image to a known endpoint on your local server, and passing in the source url of the image as a query parameter.

For example:

var sourceImageUrl = "https://www.google.com/images/srpr/logo4w.png",  
    localProxyEndpoint = "/imageproxy",   
    image = new Image();   

image.src = localProxyEndpoint + "?source=" + encodeURIComponent(sourceImageUrl);

Now, server-side, you'll handle this GET request, rip off the value of the source parameter from the URI, grab the image from the source, and return it in your response.