repurpose for use beyond a bookmarklet

[deanmalmgren]

Thanks for putting this together @shancarter et al!

I recently had a project where I wanted to have a button that downloaded an svg image as a png and, when combined with a few things from this blog post, I made it possible to download an svg with the click of a button (highlighted below):

I was thinking of contributing this back to the project so that others could easily download svg elements as a png with an interface that looks something like this:

<!-- index.html -->
<script src="//cdn.rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar-download.js"></script>
<script>
    var svg_el = document.getElementById("#my-svg");
    $("#my-button").click(function () {
        crowbar(svg_el, { // optional arguments
            filename: "awesome.png",
            width: 400,
            height: 400,
        });
    });
</script>

I would be happy to put together a pull request but, before I did, I thought I'd try and see if this is inline with the goals of this project or whether it would be better to just start a separate project that enables this functionality. Would you like this functionality to be baked into svg-crowbar or is your focus specifically on the bookmarklet?

[ashanan]

I'm looking for something that does exactly that, @deanmalmgren. Did you end up creating a separate project for it?

[deanmalmgren]

@ashanan I did not get around to making a separate project for it, but I threw together something really quickly based on what I was previously doing. Here's an example of how I did this before. I'd still be happy to wrap this up in a separate project, but if you'd like to take the lead on that I'd gratefully cheer you on!

[edeno]

I implemented something similar on my fork, although I haven't added png support. Check it out here.

[deanmalmgren]

Nice! I'll open up an issue on your project to incorporate png support. Maybe that's the best path forward for this...

[ivarref]

Hi @deanmalmgren @edeno Maybe of interest: I did a proof of concept to grab the SVG server side using python, selenium/chrome and @edeno 's fork of crowbar: https://github.com/ivarref/d3-save-svg/blob/develop/extract_svg.py Embedding of the raster images does not (yet) work, not sure why. Regards.

[marcmaxson]

I implemented your code example (from http://bl.ocks.org/deanmalmgren/22d76b9c1f487ad1dde6) on my site and the button works, but it strips the color out of the bars on all charts. I know the SVG contains them because the chrome SVG crowbar works on the page, but using your trick to put a "download" button for the D3 graph loses color. Can you advise?

[deanmalmgren]

@marcmaxson I'm sorry to hear it isn't working properly. My best guess is that the CSS isn't properly getting transferred into the downloaded image. There is a canvas element somewhere in that page that is hidden but is used to create the PNG. It might be helpful for debugging if you make sure that you can see that canvas element. That's unfortunately my best guess at this point.

[prisacaruadela]

Hi deanmalmgren! i tried implementing your example with a force graph and it works fine, but only if I have just a few nodes. Otherwise it does not download it, but no error occures

[deanmalmgren]

I'm not sure what to tell you @prisacaruadela, unfortunately I haven't done anything with this in almost 2 years and I'm not in a good position to look into it at the moment.

Off the top of my head, I might try debugging by not hiding the canvas element to see if the canvas is rendered properly.

One other wrinkle with the force graph layout is whether it is still moving when you try to export the nodes. I have no idea what would happen in that scenario...

Good luck!

[prisacaruadela]

Thanks for the answer @deanmalmgren!