SVG转换被用D3js创建PNG

我有D3js创造了一些图表，我想通过JavaScript转换为PNG图像，使用户可以下载图表。SVG转换被用D3js创建PNG

我已经看到SVG转换为画布，画布转换为图像解决方案。这对我不起作用，因为SVG使用类来对元素进行样式设置（这是因为可保留性我不想改变的东西），这导致整个画布变得黑色，并且线条很粗。

是否有可能在SVG-图表直接转换成PNG？

的页面是一个Ruby on Rails项目内，因此并不一定是一个纯JavaScript的解决方案，但我更喜欢用JavaScript来做到这一点，所以我也可以实现它在其他项目中。

2013-10-15 Leon Hooijer

对不起，我还没有做任何与SVG，所以这个答案可能是废话:)。你是说通过使用类而不是内联样式，当转换为画布时，事情会搞砸吗？在这种情况下，是不是编程的问题转化为画布前，从应用的CSS类的风格？ – Owen

当我在2个月前添加这个问题时，确实是这个问题。我已经为您建议的解决方案实施了一个解决方案。之后我遇到的问题是，大多数浏览器不会正确渲染生成的画布/ PNG。这导致元素缺失和/或图像变黑。我遇到的一个问题是，我无法传递data-uri的大于2,048个字符，所以我无法传递整个uri来下载它（并非真正的问题相关）。 –

要显示一个画面内的SVG，你首先必须使用一个解析器/渲染器实用改编自诸如http://code.google.com/p/canvg/

（代码转换：在转换SVG图像（JPEG，PNG等）浏览器）

// the canvg call that takes the svg xml and converts it to a canvas 
canvg('canvas', $("svg").html()); 

// the canvas calls to output a png 
var canvas = document.getElementById("canvas"); 
var img = canvas.toDataURL("image/png");

来源

2013-12-22 01:13:39 MZaragoza

嗯，我对此有两个问题：第一：我一定要实现所有3个库（rgbcolor，stackblur，canvg）？第二：我注意到canvg.js文件是相当大的。你知道任何小型图书馆吗？或者是否有可能只识别nescesarry方法？我问这是因为RoR应用程序在第一次加载时加载所有JS文件，所以另一个大型库（我们已经有很多JS）会在第一次加载时变慢。 –

虽然这不是我的“完美”解决方案，但它确实有效。所以我会接受它作为答案。 –

Canvg解决方案是否可以与NodeJS一起在服务器端将SVG转换为PNG？我尝试过使用svg2png，但在windows7上运行得并不顺利 – amar

SVG转换被用D3js创建PNG

回答

相关问题