33

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

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

你能帮我解决这个异常吗：

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

谢谢

4

4 回答 4

20

要在画布中显示您的 svg，您首先必须使用解析器/渲染器实用程序进行转换，例如http://code.google.com/p/canvg/

（代码改编自：Convert SVG to image (JPEG, PNG, etc.) in the browser，未测试）

// 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");
于 2013-04-17T02:25:43.610 回答
6

只是提醒一下，我将这个概念变成了一个小型 JavaScript 库：https ://github.com/krunkosaurus/simg

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

于 2014-04-20T02:47:09.490 回答
5

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

如果浏览器同时支持 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);
    }
}
于 2014-03-05T11:47:30.820 回答
3

上面 Mauvis Ledford 创建和建议的 Simg 库非常适合下载我使用 Dimple 创建的 svg 图表。

然而，我确实需要更改代码的一个方面以使其工作。在 toString() 原型内部，在 forEach 循环内部（第 37 行），如果将“svg.setAttribute(..)”更改为“svg[0].setAttribute”，它将缓解“setAttribute(..) 不函数”错误。类似地，需要在 return 语句的正下方执行相同的操作，在 svg 之后附加“[0]”（第 39 行）。

我还必须手动编辑 toCanvas() 原型中的“canvas.width”和“canvas.height”（第 48 和 49 行）分配，以使下载的图像尺寸更正确（以前只是图表左上角的静态 300x150 正方形）。

于 2016-07-19T14:44:28.877 回答