javascript - 将使用 D3js 创建的 SVG 转换为 PNG

标签 javascript jquery ruby-on-rails svg png

我有一些用 D3js 创建的图表,我想通过 JavaScript 将其转换为 PNG 图像,以便用户可以下载图表。

我见过将 SVG 转换为 Canvas 并将 Canvas 转换为图像的解决方案。这对我不起作用,因为 SVG 使用类来设置元素的样式(由于可维护性,我宁愿不更改),这会导致整个 Canvas 变成黑色并带有非常粗的线条。

是否可以将 SVG 图表直接转换为 PNG?

该页面位于 Ruby on Rails 项目中,因此它不必是纯 JavaScript 解决方案,但我更愿意使用 JavaScript 来执行此操作,这样我也可以在其他项目中实现它。

最佳答案

要在 Canvas 中显示您的 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', $("svg").html());

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

关于javascript - 将使用 D3js 创建的 SVG 转换为 PNG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19378295/

相关文章:

ruby-on-rails - 确保 gem 与 Rails 3.x 和 4.0 一起工作的 gem 测试策略?

javascript - WinJS Promise 然后出错

Jquery - 按类获取下一个元素并隐藏当前元素

javascript - 使用拦截器延迟所有请求

c# - 排序不适用于给出编码输出的 Json 结果

ajax - AJAX 请求时禁用按钮

ruby-on-rails - rails : how to find record before last?

ruby-on-rails - 查找至少具有一个关联的记录,但排除任何关联都符合条件的记录

javascript - 直接在内联元素下放置下拉列表

javascript - Cypress :找不到模块:错误:无法解析 'cypress-wait-util'