如何转换/保存d3.jsgraphics为pdf / jpeg

我正在处理客户端/ JavaScript函数来将现有的D3-SVGgraphics保存或转换为文件。 我search了很多，发现了一些build议，主要使用canvas.toDataURL() 。

我在我的页面没有<canvas> ，而是使用： d3.select("body").append("svg")....我也尝试将SVG追加到<canvas>但没有任何反应。

你能帮我解决这个例外：

 Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL' 

谢谢

Answer 1

要在canvas中显示svg，首先必须使用parsing器/渲染器实用程序（如http://code.google.com/p/canvg/）将其转换。;

（代码改编自： 将SVG转换为浏览器中的图像（JPEG，PNG等） ，未经testing）

 // the canvg call that takes the svg xml and converts it to a canvas canvg('canvas', $("#my-svg").html()); // the canvas calls to output a png var canvas = document.getElementById("canvas"); var img = canvas.toDataURL("image/png"); 

Answer 2

把这个概念变成一个小型的JavaScript库吧： https : //github.com/krunkosaurus/simg

它只是将任何SVG转换为图像来换出或触发下载。 从这里采取的想法： http : //techslides.com/save-svg-as-an-image/

Answer 3

正如@Premasagar在这个问题的评论中指出的那样， 在浏览器中将SVG转换为图像（JPEG，PNG等）

如果Borwser同时支持SVG和canvas，则可以使用这种技术https://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html

 function importSVG(sourceSVG, targetCanvas) { // https://developer.mozilla.org/en/XMLSerializer svg_xml = (new XMLSerializer()).serializeToString(sourceSVG); var ctx = targetCanvas.getContext('2d'); // this is just a JavaScript (HTML) image var img = new Image(); // http://en.wikipedia.org/wiki/SVG#Native_support // https://developer.mozilla.org/en/DOM/window.btoa img.src = "data:image/svg+xml;base64," + btoa(svg_xml); img.onload = function() { // after this, Canvas' origin-clean is DIRTY ctx.drawImage(img, 0, 0); } } 

Answer 4

上面的Mauvis Ledford创build并build议的Simg库很适合用来下载由Dimple创build的svg图表。

然而，我确实需要改变代码的一个方面来使其工作。 如果将“svg.setAttribute（..）”更改为“svg [0] .setAttribute”，则会减轻“setAttribute（..）一个函数“错误。 同样的，在return语句的下面需要做同样的事情，在svg（第39行）之后附加“[0]”。

我还必须手动编辑toCanvas（）原型中的“canvas.width”和“canvas.height”（第48和49行）赋值，以便使下载的图像更加正确（以前只是下载静态300×150正方形在图表的左上angular）。