svg - 如何将d3.js图形转换/保存为pdf/jpeg

Question

我正在使用客户端/ javascript函数将现有的D3-SVG图形保存或转换为文件。
我进行了很多搜索，发现了一些建议，主要是使用canvas.toDataURL()。

我的页面中没有<canvas>，而是使用:d3.select("body").append("svg")....我也尝试过将SVG附加到<canvas>，但是什么也没有发生。

您能否帮助我解决此异常:

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

谢谢

Answer 1

正如@Premasagar在对这个问题的评论中指出的Convert SVG to image (JPEG, PNG, etc.) in the browser

如果浏览器同时支持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);
    }
}