5

我正在使用 jQuery/FLOT 绘制图形，我希望用户能够下载图形的 PDF 版本。我正在使用 ColdFusion 编写 PDF。创建图形后，我将图形 div 的 html 通过 ajax 发送到使用 cfdocument 编写 pdf 的 CF 脚本。问题是在 PDF 中，它只显示轴和标签，而不是实际的图形数据。有人知道如何获取在画布上动态创建的实际图像吗？

4

4 回答 4

3

您可以使用phantomJS（WebKit 引擎）等无头浏览器在服务器上呈现图表。

您只需要一个接受 URL 并将输出作为 Base64 编码字符串呈现到控制台流或写入图像的脚本。

据我所知，这是唯一半独立于浏览器的方法。

这是 phantomjs 的脚本，它将给定的网页输出为 base64 编码的图像字符串：

var page = require('webpage').create();
var system = require('system');

var pageUrl = system.args[1];

page.viewportSize = { width: 1280, height: 720 };
page.open(pageUrl , function () {
    console.log(page.renderBase64('PNG'));
    phantom.exit();
});
于 2014-02-03T14:42:55.737 回答
2

查看 CutyCapt (http://cutycapt.sourceforge.net/)，它似乎适用于 Flot。

于 2011-02-25T12:10:53.357 回答
2

您还可以拍摄您canvas 使用toDataURL()和替换img元素的快照，PDF 转换器应该能够处理：

var canvas = $("canvas.base")[0];
var tmpimg    = canvas.toDataURL("image/png");
//console.log(tmpimg);
$("body").append('<img src="'+tmpimg+'"/>');

请注意，生成的图像只是内容canvas（即图形本身），不包括轴或图例。您可能需要对浮点占位符中的图像进行一些棘手的替换/对齐，但它会为您提供一个可用的图像。

这只是对这个问题的公认答案的轻微修改，我认为这里有人可能会觉得它很有用。

于 2012-10-12T19:28:49.687 回答
1

我认为这尚未在 flot 中实现，请参阅http://code.google.com/p/flot/issues/detail?id=175

于 2010-04-15T16:03:51.167 回答