Lienzo contaminado con canvas.toBlob

Estoy tratando de convertir un svg en una image y solicitar una descarga al usuario.

var chart = $(svg.node()) .attr('xmlns', 'http://www.w3.org/2000/svg'); var width = that.svg_width; var height = that.svg_height; var data = new XMLSerializer().serializeToString(chart.get(0)); var svg1 = new Blob([data], { type: "image/svg+xml;charset=utf-8" }); var url = URL.createObjectURL(svg1); var img = $('<img />') .width(width) .height(height); img.attr('crossOrigin' ,'' ); img.bind('load', function() { var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; var ctx = canvas.getContext('2d'); ctx.drawImage(img.get(0), 0, 0); canvas.toBlob(function(blob) { // this is where it fails saveAs(blob, "test.png"); }); }); img.attr('src', url); 

Chrome arroja una exception diciendo "Unbeught SecurityError: no se pudo ejecutar 'toDataURL' en 'HTMLCanvasElement': es posible que los canvass contaminados no se exporten". en canvas.toBlob

No hay origen cruzado involucrado en este caso. El svg está en la misma página que estoy convirtiendo a una image y tratando de cargar en el canvas. Entonces, ¿cómo está contaminado el canvas? ¿Me estoy perdiendo de algo?

Después de algunas excavaciones se encontró con https://code.google.com/p/chromium/issues/detail?id=294129 . Mi svg estaba teniendo un <foreignObject> (gráfico basado en d3) y es por eso que tuve este problema.

Usar el uri de datos en lugar de cargar el svg del blob resolvió mi problema