14

我有使用 D3 Javascript 库生成的图表，我需要将它们保存到 PNG 或 SVG 文件中。

是否有一些图书馆可以完成这项工作？

我发现了这个https://github.com/sampumon/SVG.toDataURL但在我的 html5 上不起作用，在 Firefox 控制台中我收到了这个错误：

NS_ERROR_NOT_AVAILABLE：组件不可用 [Interrompi per questo errore]

ctx.drawImage(img, 0, 0);

4

3 回答 3

8

developer.mozilla.org中的示例，展示了如何使用 canvas 元素将 svg 导出为 png。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
             '<em>I</em> like ' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
  var png_img = canvas.toDataURL("image/png");
}

img.src = url;
于 2016-12-09T13:52:47.913 回答
1

服务器端脚本方法

这是将 svg 元素保存到 png 的简单方法（尽管它使用服务器端脚本，这可能与您的期望不同）： Checkout this page。

正如作者所记录的，客户端提取 svg 元素（使用 XMLSerializer.serializeToString）并将其发送到服务器；服务器将其转换为 png 并将其发送回客户端。服务器可以使用任何方便的程序（在这种情况下为 rsvg-convert）。

Canvg 库

您可以使用这个库在客户端执行此操作（检查一下！）：

canvg 是一个 SVG 解析器和渲染器。它获取 SVG 文件的 URL 或 SVG 文件的文本，在 JavaScript 中对其进行解析，并将结果呈现在 Canvas 元素上

像这样使用它：

//load a svg snippet in the canvas with id = 'drawingArea'
canvg(document.getElementById('drawingArea'), '<svg>... </svg>')

然后你可以使用 toDataURL 方法： document.getElementById('drawingArea').toDataURL('image/png');

于 2014-03-09T14:50:49.507 回答
1

此扩展程序适用<svg>于页面中的所有标签：https ://chrome.google.com/webstore/detail/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp?hl=en-GB

于 2019-12-09T15:25:15.907 回答