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(); 
});