4

Is there any better or easy way to export nvD3 chart to jpeg or png image format? I tried Javascript SVG parser and renderer on Canvas by using http://code.google.com/p/canvg/ But in some cases (may be due to large size or greater resolution) the export option not working.

user3172663
  • 312
  • 3
  • 14
  • Better ask howto export SVG to png, because nvd3 might not be known by all SVG experts. – hgoebl Jan 10 '14 at 13:01
  • Have you seen [this project](https://github.com/shawnbot/d3-to-png)? – Lars Kotthoff Jan 10 '14 at 13:16
  • @LarsKotthoff thanks for your above suggestion. I was trying to import (nvd3)svg images using https://github.com/exupero/saveSvgAsPng Here is some sample code: function printPNG() { saveSvgAsPng(document.getElementById("chart-svg"), "diagram.png", 3); } But the problem is only left corner part of the chart is coming when i am trying to save/import. Please suggest .. – user3172663 May 06 '14 at 05:45
  • I tried the saveSVGAsPng plugin and it works perfectly in chrome but am getting a DOM exception message when trying in Safari. I also tried canvg and it renders the svg as a canvas perfectly, but when I try to get the DataURI, it sends across a security exception! – Rahul Rout Jul 09 '14 at 05:12
  • @user3172663 what finally worked for you? – Dinesh Sep 08 '14 at 18:13
  • 1
    @Dinesh i left the option at https://github.com/exupero/saveSvgAsPng but this was not the best as there was some issue with some browsers.So i think the best solution would be go for d3Export http://d3export.housegordon.org/ – user3172663 Sep 09 '14 at 07:19
  • 1
    Possible duplicate of [Convert SVG to PNG and maintain CSS integrity](http://stackoverflow.com/questions/20394041/convert-svg-to-png-and-maintain-css-integrity) – Dyno Fu Dec 31 '16 at 04:54

1 Answers1

0

In case you want to support all browsers including IE/safari you'll have to implement that server side. I tried a lot but couldn't find a foolproof way to achieve 100% browser compatibility using only js. Canvg and saveSvgAsPng won't help you beyond firefox/chrome.

See how highcharts doing that as a fallback option http://www.highcharts.com/docs/export-module/setting-up-the-server

Intellex
  • 163
  • 1
  • 1
  • 11