Abel Makihara Abel Makihara - 4 months ago 36
Javascript Question

Canvas CORS security error in Safari only

How can i set dataURL format('"data:image/svg+xml;base64,"' ) svg to img.src in safari?(It's OK in chrome.).

Safari will throw securityError.
Any method to make the dataURL's domain right?

var img = new Image();
img.onload = myLoader;
img.crossOrigin = 'anonymous';
img.src = "data:image/svg+xml;base64,...............";
var canvas = document.createElement('CANVAS');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
console.log(canvas.toDataURL());

Answer

This is probably because you've got a <foreignObject> element in your SVG document.

For Security reasons, Safari v.9+ will taint the canvas when this element is drawn on it.

No workaround except removing it from your SVG ;-)

Ps: IE prior to Edge will also taint the canvas, once any svg has been drawn to it.

Comments