2

I built an interface using ASP.NET 4.5, C# and D3.js where I mapped out the organs and bones for a human body. The problem is that when I try to print, it almost never prints out properly, and my users want to have a "Save Image" button next to the visualization so they can import the saved image into their own Word/PowerPoint end of months reports.

I'm not sure if I need to post my code. I'm just loading some SVG I have traced in Illustrator, saved it in a JSON file and loaded into D3.

I know print screen could be an option, but saving as an image could also help me display multiple files without overloading my browser with D3 code.

AJF
  • 11,767
  • 2
  • 37
  • 64
i_shoot_photos
  • 166
  • 2
  • 15

1 Answers1

3

Basically d3.js works with SVG. You could directly download .svg image from your d3.js work tho.

Here is an example (from Mike Bostock, d3.js creator) where he goes from SVG to PNG step by step.

He uses several tricks including XML Serializing, Blob objects (kinda file-like object for raw data (about)) and finally create another PNG image from the SVG using canvas.toDataURL(). Please look at the source, it quite interesting and useful to understand differences.

Hope it helps

pltrdy

pltrdy
  • 2,069
  • 1
  • 11
  • 29
  • Thanks a lot! Like Gusman mentioned above as well, the canvas.toDataURL() was something I didn't know and I was searching using the wrong way i.e i was trying to search how to screenshot certain regions of a webpage and save that to clipboard etc. But im glad there is a better way now. – i_shoot_photos Jan 25 '17 at 17:18