internet explorer 10 - Canvas.toDataURL() working in all browsers except IE10 -

i'm working on project uses canvas automatically crop image, return data url. uses images external server, has appropriate cors headers allow images converted data uris after cropped though cross-origin.

the code works (and without security errors!) in browsers except ie 10, in throws 'script5022: securityerror' when canvas.todataurl() called.

is bug in ie or need differently in code make work in idiot exploder? thanks. -scott

edit here (most of) code i'm using create , draw canvas;

var canvas = document.createelement('canvas'); var ctx = canvas.getcontext('2d'); var img = new image(); img.src = imageserverurl + '?id=' + imageidtoget; // imageserverurl points different domain server has headers allowing requests domain /*     code here defines cropping area, in variables 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(); // succeeds in other browsers throws securityerror in ie 

i don't believe ie10 has cors support images. this mdn article seems up.

as article states:

although can use images without cors approval in canvas, doing taints canvas. once canvas has been tainted, can no longer pull data out of canvas. example, can no longer use canvas toblob(), todataurl(), or getimagedata() methods; doing throw security error.

so, looks you'll have proxy image same origin/domain 1 hosting code in question before attempting this, @ least ie10 , opera.

to deal browsers not have cors support images, you'll need proxy image server-side. can pretty sending source of image known endpoint on local server, , passing in source url of image 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 request, rip off value of source parameter uri, grab image source, , return in response.