如何转换/保存d3.js图形为PDF / JPEG(How to convert/save d3.j

我工作的一个客户端/ javascript函数保存或转换现有的D3-SVG图形到一个文件中。我已经搜查了很多，发现了一些建议，主要是利用canvas.toDataURL()

我没有<canvas>在我的网页，而不是使用： d3.select("body").append("svg")....我也试着到SVG追加到<canvas> ，但是什么也没有发生。

你能帮我解决这个异常：

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

谢谢

Answer 1:

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

如果borwser支持SVG和画布，你可以使用这种技术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 2:

要显示一个画面内的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', $("#my-svg").html());

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

Answer 3:

刚抬起头，我把这个概念变成一个小型的JavaScript库： https://github.com/krunkosaurus/simg

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

Answer 4:

该SIMG库创建和Mauvis莱德福德以上建议允许与酒窝创建了SVG图表下载伟大的工作。

然而，我确实需要改变代码的一个方面，以使其发挥作用。内的toString（）的原型的，foreach循环（线37）的内部，如果你改变 “svg.setAttribute（..）” 到 “SVG [0] .setAttribute”，它将缓解“的setAttribute（..）不函数”的错误。要右下方做过return语句同样相同的需求，追加“[0]” SVG后（第39行）。

我也不得不手动编辑“canvas.width”和“canvas.height”（线48 49）分配在toCanvas（）的原型，以使下载的图像更正确的大小（它以前只是下载在图表的左上角静态300x150平方）。

文章来源: How to convert/save d3.js graph to pdf/jpeg