1508077 - Draw SVG image to canvas "NS_ERROR_NOT_AVAILABLE"

Status: RESOLVED DUPLICATE of bug 700533

(Core :: SVG, defect)

Description

[d3ck0r]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Steps to reproduce:

I have this gist, which is a single html page.

https://gist.github.com/d3x0r/d19713181850cae0e524030a537988b5

I made an account and made this jsfiddle
http://jsfiddle.net/d3x0r/g9docs3f/1/ 

(split the <script> to javascript)

0) make a canvas
1) make an SVG image 
2) convert the SVG image to an image, using data URI from SVG set into Image.
2a) append the SVG image to the page
3) Draw image on canvas

on 3) there is no image output on firefox.
(on Edge, some of the image is output, most isn't.  On Chrome, the image it output as if the size of the image were the size of the canvas; which should be incorrect, I would assume the width/height of the Image would control how big the image is... I would assume that on setting width/height/src that a static internal 'image' would be rendered for the "Img' which allows me to output the SVG to a canvas.)




Actual results:


What I get is an error that says it's an unknown error when ctx.drawImage() is called.


NS_ERROR_NOT_AVAILABLE: _display:91
window.onload/<
http://fiddle.jshell.net/_display/:91:1

(or min.html, or the actual page I was developing)

I have taken the URI that is generated, and psated it into chrome and the SVG shows as expected.  (Edge does not take a data URI on the address bar)




Expected results:

The Image with data URI should be output.

(You're ALL broken)

Comment 1

[Robert Longson [:longsonr]]

Set the SVG width and height as attributes rather than styles e.g.

	svg.setAttribute('width',  66);
	svg.setAttribute('height',  66);

Comment 2

[d3ck0r]

Updated to include that, no change.

http://jsfiddle.net/d3x0r/g9docs3f/2/

Comment 3

[Robert Longson [:longsonr]]

I see a yellow circle with a beige outline now that was not there before.

Comment 4

[d3ck0r]

Attachment: Firefox screenshot of fiddle...

Firefox screen shot does not have the yellow circle drawn on the canvas.

Comment 5

[d3ck0r]

Attachment: chrome-fiddle.jpg

Chrome shows the circle drawn on the canvas.

Comment 6

[d3ck0r]

Yes there is the SVG that is appeneded to the page ont he lower right corner, but that wasn't the issue... the one that gets drawn in the canvas (top left corner) is the one that's not showing.

Comment 7

[Robert Longson [:longsonr]]

There are plenty of online examples of how to do this. Here's a working one: https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas

Comment 8

[Robert Longson [:longsonr]]

This answer works for instance: https://stackoverflow.com/a/45334496/1038015

Comment 9

[d3ck0r]

new XMLSerializer().serializeToString(image); does remove the need to replace xmlns into the output.  Otherwise that's the only difference.

and btoa is required then; which I generally avoid because of lack of universal support.
I see getting outerHTML returns tags as <circle></circle> which even when encoded as base64 firefox dislikes.

methods that work on chrome
1) get outerHTML, insert xmlns, encode as URI
2) use xml serializer, encode as URI
3) get outerHTML, insert xmlns, encode base64 
4) use xml serializer, encode as base64


what works for firefox

4) use xml serializer, encode as base64


and none of the above work for Edge; which has an issue with the gradient shaders showing as black, but all of the above are otherwise valid for translating the svg to an image.

Comment 10

[Robert Longson [:longsonr]]

I assume it's not working because you've # characters in there which need to be URL encoded. Chrome currently doesn't implement this properly but I believe plans to change.

Comment 11

[d3ck0r]

svghtml = svghtml.replace( /#/g, "%23" );

Yes. I was just coming back to say additionally substituting those allows non base64 usage...

Comment 12

[Robert Longson [:longsonr]]

That's not a Firefox bug though, it's a Chome bug.

Comment 13

[d3ck0r]

ya... fixed in canary actually... 

XMLSerializer().serializeToString(image)
was the first time I saw that in all of my searching until now.

<circle></circle> is the only other difference other thaan the xmlns which can be added...
bot replacing '></circle>' -> '/>' for all types is pretty tedious (for processing outerHTML)