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

关键词：

【中文标题】如何将 d3.js 图形转换/保存为 pdf/jpeg【英文标题】：How to convert/save d3.js graph to pdf/jpeg 【发布时间】：2013-04-09 14:17:32 【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

要在浏览器内转换为 png，请查看 ***.com/questions/3975499/… 如果不需要在运行时，像 casperjs 这样的工具可以让你对页面中的任何元素进行截图casperjs.org/api.html#casper.captureSelector pdf 导出见***.com/questions/3360641/…。 【参考方案1】：

要在画布中显示您的 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");

【讨论】：

第一行不起作用，因为 1. canvg 等待 URL，而不是实际的 XML 数据，并且 2. $('svg').html() 也不起作用 - 你需要用于访问内部 SVG XML 的 innerSVG JS 库。 canvg(document.getElementById('drawingArea'), '<svg>...</svg>') 作为用法 github.com/gabelerner/canvg 给出。将$('svg').html() 更改为$("#my-svg").html()。 一旦有了img，如何触发下载？ $("#my-svg").html() 不会返回打开和关闭<svg> 标签；为了让它工作，我不得不打电话给canvg('canvas', "<svg>" + $("my-svg").html() + "</svg>")。 当我使用 npm 构建时，这似乎在浏览器中不起作用。【参考方案2】：

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

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

【讨论】：

我正在尝试使用 js 库，但无法正常工作。来自 techslides 的代码确实有效，尽管在 Firefox 33.0 中没有我注意到的一件事是您的代码将 a.href 引用到 img src，而不是画布数据 URL。有什么想法吗？ 另外，我使用 DC.js 中的 lineChart 并且 png 文件看起来没有应用 css 样式，即使我在 html 中粘贴了所有 dc.css。 @sebastian：请注意，在收到一些拉取请求后，我继续使用文档和更多功能更新了代码库。 这会在 Chrome 中引发错误，因为它拒绝处理 MIME 除了d3.js 生成的图表是黑白的，颜色丢失之外，对我来说效果很好。有什么想法吗？【参考方案3】：

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

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

【讨论】：

【参考方案4】：

上面由 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 正方形）。

【讨论】：

你是我的英雄。现在它起作用了。但我还必须在self.svg 的第 91 行和第 92 行附加“[0]”。不幸的是，我只得到一个黑色矩形。里面什么都没有显示。 你能举个例子吗？

无论如何以编程方式将 D3 JS 图形导出到 LaTeX tikz 图形中？

】无论如何以编程方式将D3JS图形导出到LaTeXtikz图形中？【英文标题】：IsthereanywaytoexportD3JSgraphsintoLaTeXtikzgraphsprogrammatically?【发布时间】：2018-06-1601:54:01【问题描述】：使用RtikzDevice（在R端）和LaTeXtikz包（在LaTeX端）有很多方法... 查看详情

d3.js：将 SVG 地理路径转换为画布

】d3.js：将SVG地理路径转换为画布【英文标题】：d3.js:convertSVGgeo-pathtocanvas【发布时间】：2021-04-1009:00:40【问题描述】：我是D3的新手，刚刚编写了一个小代码来在地图上显示点转换：StaticImage我从一个大约100点的小样本开始，效... 查看详情

将 Java 2d 图形图像保存为 .png 文件

...的图形而是创建一些空白的png文件。问题是我很难弄清楚如何转换为BufferedImage或Render 查看详情

如何将 Pandas 数据框/系列数据保存为图形？

】如何将Pandas数据框/系列数据保存为图形？【英文标题】：HowtosavethePandasdataframe/seriesdataasafigure?【发布时间】：2013-11-1215:33:09【问题描述】：听起来有些奇怪，但我需要将Pandas控制台输出字符串保存为pngpics。例如：>>>dfsa... 查看详情

如何使用 saveas() 将 MATLAB 图形保存为 JPEG 而图像不严重？

】如何使用saveas()将MATLAB图形保存为JPEG而图像不严重？【英文标题】：HowtosaveMATLABfigureasJPEGusingsaveas()withouttheimagecomingoffbadly?【发布时间】：2013-04-0518:20:21【问题描述】：在我正在编写的MATLAB函数中，我正在生成一个图形。执行... 查看详情

在 d3.js 中将节点和链接转换为分层树

...】：2012-12-0322:34:23【问题描述】：我有一个JSON表示一个图形（在我的例子中也是一个树），看起来像这样："directed":true,"graph":[],"nodes":["time":4,"id":4551308,"name":"AltodaBoaVis 查看详情

使用 D3.js（IE、safari 和 chrome）创建 SVG 后，如何保存/导出 SVG 文件？

】使用D3.js（IE、safari和chrome）创建SVG后，如何保存/导出SVG文件？【英文标题】：HowdoIsave/exportanSVGfileaftercreatinganSVGwithD3.js(IE,safariandchrome)?【发布时间】：2014-06-0617:51:35【问题描述】：我目前有一个使用D3的网站，我希望用户可以... 查看详情

如何将 CorePlot 创建的图形保存为 jpg 文件

】如何将CorePlot创建的图形保存为jpg文件【英文标题】：HowtosaveagraphiccreatedbyCorePlottoajpgfile【发布时间】：2010-11-1916:20:24【问题描述】：我正在使用CorePlot在我的应用程序中绘制不同的图形。然后，我想将此图保存为jpg文件并发布... 查看详情

如何将图形保存在文件中，然后再调用它？

】如何将图形保存在文件中，然后再调用它？【英文标题】：howtosaveaGraphinafileandlatercallit?【发布时间】：2019-05-1710:20:52【问题描述】：我必须读取代表电路的文件。然后将该电路转换为DAG。我已经使用邻接列表做到了。我的问... 查看详情

如何将图形保存为png或jpg文件c#

】如何将图形保存为png或jpg文件c#【英文标题】：Howtosavegraphicsintopngorjpgfilec#【发布时间】：2020-12-1613:43:14【问题描述】：我正在开发C#windows窗体应用程序中的图形应用程序。我有一个可以在上面画的表格。所以我从表单中创建... 查看详情

如何将在 for 循环中生成的多个图形而不是 SUBPLOTS 保存为一个图形？ [复制]

】如何将在for循环中生成的多个图形而不是SUBPLOTS保存为一个图形？[复制]【英文标题】：Howtosavemultiplefigures,NOTSUBPLOTS,producedinaforloopasonefigure?[duplicate]【发布时间】：2019-02-0615:26:09【问题描述】：在JupyterNotebook中，我编写了以下... 查看详情

d3.js 图形输出成高分辨率打印质量文件？

】d3.js图形输出成高分辨率打印质量文件？【英文标题】：d3.jsgraphsoutputintohighresolutionprintqualityfiles?【发布时间】：2012-09-2500:43:06【问题描述】：有没有办法将基于d3.js的html/js创建的图形、图表、地图等输出为具有出版物打印质... 查看详情

如何保存在 d3.js 脚本中构建的 JSON 数据

】如何保存在d3.js脚本中构建的JSON数据【英文标题】：HowtosaveJSONdatabuiltinad3.jsscript【发布时间】：2017-09-2506:55:33【问题描述】：我大家好，我是javascript/D3.js编程的新手。我需要调整一个代码，我觉得有点失落。主要问题是：如... 查看详情

d3.js，将转换应用于数据？

...。在这里使用转换（）是有意义的，但我似乎无法弄清楚如何将转换应用于节点的绑定数据，而不是svg对象的属性。这可能吗，还是我应该只写一个带有插值的简单setTimeout()？【问题讨论】：最后，只有svg对象 查看详情

将 SVG 动画录制并保存为动画 GIF [关闭]

...用于录制SVG动画并将其保存为动画GIF的库或工具？SVG几何图形使用JavaScript和D3.js进行动画处理，它们的颜色和不透明度使用CSS3进行动画处理。【问题讨论】：Creatinganima 查看详情

如何使用 SVG translate 将 d3.js 投影居中到给定的纬度和经度值？

】如何使用SVGtranslate将d3.js投影居中到给定的纬度和经度值？【英文标题】：HowcanIuseSVGtranslatetocenterad3.jsprojectiontogivenlatitudeandlongitudevalues?【发布时间】：2013-05-2301:26:41【问题描述】：我正在使用d3渲染GeoJSON世界地图的墨卡托投... 查看详情

我的 fig1.savefig 函数将我的图形保存为空白屏幕，我该如何解决？

】我的fig1.savefig函数将我的图形保存为空白屏幕，我该如何解决？【英文标题】：Myfig1.savefigfunctionissavingmyfigureasablankscreen,howdoIfixthis?【发布时间】：2021-01-2021:40:55【问题描述】：我正在通过.csv文件导入数据并绘制它，但是当我... 查看详情

d3.js - 当鼠标悬停在 SVG 容器上的这些元素上时，如何将光标设置为手？

】d3.js-当鼠标悬停在SVG容器上的这些元素上时，如何将光标设置为手？【英文标题】：d3.js-HowcanIsetthecursortohandwhenmouseovertheseelementsonSVGcontainer?【发布时间】：2016-07-1912:14:51【问题描述】：我使用d3.js在SVG容器上绘制了一些圆圈。... 查看详情