13

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 headers to allow the images to be converted to data URIs after they are cropped even though they are cross-origin.

The code works perfectly (and without security errors!) in all browsers except IE 10, in which it throws 'SCRIPT5022: SecurityError' when canvas.toDataURL() is called.

Is this a bug in IE or something I need to do differently in my code to make it work in Idiot Exploder? Thanks. -Scott

EDIT Here is (most of) the code I'm using to create and draw the canvas;

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = imageServerURL + '?id=' + imageIdToGet; // imageServerURL points to a different domain but the server has headers allowing requests from my domain
/*
    code here that defines the cropping area, in variables like ulX, lrY, etc.
*/
ctx.beginPath();
ctx.moveTo(ulX, ulY);
ctx.lineTo(urX, urY);
ctx.lineTo(lrX, lrY);
ctx.lineTo(llX, llY);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, 0, 0);
var url = canvas.toDataURL(); // This succeeds in all other browsers but throws a SecurityError in IE
2
  • For starters, show us your code and/or explain how this canvas is created and what it contains. Commented Aug 7, 2013 at 19:29
  • Original question edited.
    – Scott Odle
    Commented Aug 7, 2013 at 20:12

2 Answers 2

20

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();
7
  • 3
    I'm using fabricJS, and had the same problem with IE. The only change I had to do from your example is to revokeObjectURL until the image has loaded img.onload = function(e) { ... } You can find a complete example here html5rocks.com/en/tutorials/file/xhr2/#toc-reponseTypeBlob
    – mbenegas
    Commented Dec 19, 2014 at 19:46
  • 10
    This doesn't work when url is data uri (data:image/svg+xml;base64,...)
    – vbarbarosh
    Commented Mar 5, 2015 at 22:08
  • 1
    @vbarbarosh When it's data uri, it's not related to this question (about CORS) at all.
    – RReverser
    Commented Mar 13, 2015 at 3:41
  • 6
    @rreverser we found this post by searching for "todataurl" not working in ie10. While it's not the original question asked, it does seem that if you load a base64 encoded image into a canvas in IE10 then it taints the canvas and you can no longer call toDataUrl on the canvas.
    – agrath
    Commented Mar 16, 2015 at 2:32
  • 1
    @agrath Well, yes, that's not the original question asked, and it's intended security limitation.
    – RReverser
    Commented May 24, 2016 at 18:38
6

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.

2
  • It works as expected in Opera 15 on Windows 8. What does this "proxy" solution entail?
    – Scott Odle
    Commented Aug 7, 2013 at 20:29
  • Probably works in Opera 15 since that version of Opera is based off of Chromium. I'll edit my answer with more details in a bit. Commented Aug 7, 2013 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.