CODEWITHSUNDEEP
javascripthtmlcanvassvg
user1807782
user1807782

Reputation: 461

"DOM Exception 18" from canvas

I'm taking an SVG image, drawing it onto a canvas, and trying to export it via toDataURL, but Chrome is throwing me that DOM Exception 18 security error. I know the problem is because I drew the SVG image onto the canvas with a data URI scheme (data:image/svg+xml;base64), so I guess the browser sees it as cross-domain (i.e., a security problem), but I can't think of any other way to get my SVG stuff onto the canvas. I can't host it because the SVG contents are dynamic and manipulated first before needing to be exported via toDataURL.

I read through some of the other similar questions asked on here but couldn't find any solutions for my problem.

Upvotes: 5

Views: 2425

Answers (2)

tripod
tripod

Reputation: 126

I have the same problem. As a workaround I used a SVG to HTML5 Canvas Converter to transpile the svg into canvas calls.

Upvotes: 0

robertc
robertc

Reputation: 75707

In Chrome drawing any SVG on to a canvas taints it because the SVG might contain a foreignObject, here is the bug. Chrome also has issues with data URI schemes and canvas, so you're running into a double whammy.

Upvotes: 3

Related Questions