FLOT数据作为图像写入PDF

Question

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

Answer 1

我不认为这已在海军报已实施尚未见http://code.google.com/p/flot/issues/detail?id=175

Answer 2

退房CutyCapt（http://cutycapt.sourceforge.net/），似乎与海军报工作。

Answer 3

你也可以把你的canvas的快照使用toDataURL()和替代品在img元素，PDF转换器应该能够处理：

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

注意，产生的图像是只是的canvas内容（即图形本身）并且不包括轴或图例。您可能必须在flot占位符中对图像进行一些棘手的替换/对齐操作，但它会为您提供一个可用的图像。

这只是对this question的接受答案的轻微重新工作，我认为这里有人可能会发现它有用。

Answer 4

您可以使用像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(); 
});