Svg Images - Githubissues

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas

Other

10.34k stars 1.68k forks source link

Svg Images #253

Open BMPMS opened 5 years ago

BMPMS commented 5 years ago

I've just discovered your brilliant tool. It works perfectly apart from one issue - SVG images, such as this one:

I'm using toBlob to save the whole web page as a PNG and the svg images are not rendering:

  domtoimage.toBlob(document.body).then(function (blob) {
    window.saveAs(blob, 'my_webpage.png');
 });

BMPMS commented 5 years ago

I've solved the problem by going into the code.

dom_to_image.js.zip

aravind14feb commented 5 years ago

@tsayen Thank you for this nice library. @BMPMS I'm stuck with the same problem. I tried your modifications. The dom element for the SVG images are rendered but the images are still missing in the output. In my html page, the SVG images are used with svg tags.

aravind14feb commented 5 years ago

@tsayen Thank you for this nice library. @BMPMS I'm stuck with the same problem. I tried your modifications. The dom element for the SVG images are rendered but the images are still missing in the output. In my HTML page, the SVG images are used as given below.

<svg xmlns:xlink>
    <use xlink:href="...svg image from my resource"/>
<svg>

BMPMS commented 5 years ago

It worked for me. The only difference is I was using an image tag rather than a use tag. Hope that helps?

aravind14feb commented 5 years ago

@BMPMS I tried to update your fix to support the screengrab of SVG tags with use tag as children, but I'm stuck and the inline promise (that gets dataURL as an argument) is not resolved. Can you help me with this?

BMPMS commented 5 years ago

I'm afraid I can't. This isn't my area really but since I managed to solve my specific problem I thought it was worth sharing.

Just to reiterate the above, I was using image tags not use tags.

aravind14feb commented 5 years ago

@BMPMS No problem. Thanks for your contribution anyways.