Question: Has anyone exported the SVG to PNG successfully?

[shobeck]

I would like to export the SVG created to a PNG. Has anyone done this?

[jpdaut]

I am looking for the same.. shobeck have you been successful, could you share? Or Erik, any suggestions? Thank you.

[ErikGartner]

Since dTree is built on top of d3. Any method for saving a d3 graph should work for dTree.

Here are some links:

https://gist.github.com/mbostock/6466603 http://bl.ocks.org/Rokotyan/0556f8facbaf344507cdc45dc3622177

I haven't tried them so please let me know if they work. :-)

/Erik

[jpdaut]

Thanks. I followed the steps in https://gist.github.com/mbostock/6466603, I have 2 issues.

1/ My nodes contain images and text, which look fine in the Crowbar output but are lost in the conversion from SVG to PNG. How can I preserve the images and text into the PNG file?

2/ My dTree is very wide. In the browser I can drag the graph left or right into view, it's fine. But I need the entire graph in the SVG file, and Crowbar captures only part of it. How can I make Crowbar to capture the entire graph?

[ErikGartner]

Okay... did you try the method in the second link by Rokotyan?

[saqibameen]

@jpdaut SVGs face issue while generating screenshots with libraries. There's is limited or no support. I had been facing the same issue while generating a report out of my dashboard. What worked for me was shifting this screenshot thingy from frontend to backend.

I used puppeteer to generate a PDF of the report. It's super easy. Let me know if you need any help with that.

[nextgenusfs]

hi @saqibameen, an example would be great!

[saqibameen]

@nextgenusfs sure. Below is a basic example of taking a screenshot using puppeteer:

const puppeteer = require('puppeteer'); 

try {
     const browser = await puppeteer.launch({
        headless: true
    });
    const page = await browser.newPage();
    await page.goto('xyz.com'); // set the path.
    await page.screenshot({
            path: './screenshot.png', // where you want to save screenshot.
        });
} catch(err){...}

Let me know if you need any other help.

[nextgenusfs]

thanks @saqibameen, so does this re-render the page to take the screen shot? I have a large dtree that requires some "navigation", i.e. panning, zooming, etc, so I wanted to have the functionality of taking a screen shot of what is currently displayed, will puppeteer work this way?

[saqibameen]

@nextgenusfs Puppeteer is a headless browser based on chromium and this code is for server-side. It programmatically opens a page just like a chrome browser would do but without showing anything.

What I am doing is, I have created an endpoint for taking screenshots and return the image in the response. So, if you need panning or zooming, you have to perform the panning or zooming programmatically, which might need some calculations depending upon your case.

That's the only solution which worked for me. I tried other libraries likedom-to-image, html2canvas at frontend, but they didn't work for me since I had complex SVGs rendered at the page. Maybe you can give them a shot, they might work for dtree, in case if you don't want to take it to the backend.

[nextgenusfs]

Thanks for the information @saqibameen, that's what I was worried about. Would be nice if dtree had a built in export -- perhaps on the horizon at some point.

[saqibameen]

@nextgenusfs generating SVGs directly from frontend has limitations. Not only libraries have limitation converting them into PNGs, but also it has cross-browser compatibility issues. So, maybe you should consider that as well.

Also, if you find any solution, do share.

[shobeck]

My application has a Java backend and Angular front end. I have the dTree generating the SVG on the front end - it is, of course, dynamically generated, and I have tried to produce a PNG from this SVG on the front end. It is only partially successful. If the user translates or scales the SVG in any way, the PNG reflects this. Overall doing it on the front end is a pain. My question is - does "puppeteer" work with a Java backend? I am also trying Apache Batik but have not got this to sucessfully work just yet (work is in progress).

[saqibameen]

@shobeck I am not sure if Puppeteer is available for Java. It's a Node library. But even still you can use something like browserless to get the job done in Java. Which is basically a serverless way of using Puppeteer.