javascript - 创建图形并导出为图像的库

Question

我目前正在构建一个系统，需要绘制图形点，然后将图形导出为要在电子邮件中提供的图像。此进程是对用 Java 编写的现有进程的补充。

如果有一个 Java 解决方案那就最好了，但我已经看到了一些 JavaScript 中的图形库，例如 d3.js，我也许可以使用它。据我所知，d3.js 没有将图形导出为 PNG 或 JPEG 的功能。

Answer 1

在浏览器中，您可以使用呈现到 的图表库，例如 Chart.js

http://www.chartjs.org

然后，在 Canvas 上渲染图表后，您可以获得 PNG 或 JPG 格式的图像数据:

var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL("image/png");

这将为您提供可与 html 图像一起使用的图像的 base64 编码 uri:

var imgElement = document.getElementById('myImg');
imgElement.src = dataURL;

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

也可以直接从canvas获取图像数据:

var imgData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData