Question

我正在为Jquery使用一个名为FLOT http://code.google.com/p/flot/

的插件

渲染图形后，我希望客户端能够将图形保存到文件中以供日后使用。在不要求客户下载某些工具或图像捕获设备的情况下，如何做到这一点的任何想法？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
   <head>
      <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Graph</title>
      <link href="layout.css" rel="stylesheet" type="text/css"></link>
      <!--[if IE]><script language="javascript" type="text/javascript" src="lib/flot/excanvas.min.js"></script><![endif]-->
      <script language="javascript" type="text/javascript" src="lib/canvas2image/base64.js"></script>
      <script language="javascript" type="text/javascript" src="lib/canvas2image/canvas2image.js"></script>
      <script language="javascript" type="text/javascript" src="lib/flot/jquery.js"></script>
      <script language="javascript" type="text/javascript" src="lib/gChart/jquery.gchart.js"></script>
      <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.js"></script>
      <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.selection.js"></script>
      <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.crosshair.js"></script>
      <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.navigate.js"></script>
      <style>
      </style>
   </head>
   <body>

<div id="placeholder" style="width:1000px;height:400px;"></div>
<div id="test" style="display: none; background: #ff0; padding: 5px; border: 1px solid #ddd; position: absolute;"></div>

<script type="text/javascript">
   $(function () {
       var options0 = {
         xaxis: {mode: "time"}, 
         legend: {position: "nw"},
         lines: {show: true}, 
         grid: {hoverable: true}};
         var grid_data0 = [[new Date(1286172000 * 1000), 1219], [new Date(1286258400 * 1000), 1583], [new Date(1286344800 * 1000), 1566], [new Date(1286431200 * 1000), 2191], [new Date(1286517600 * 1000), 2471], [new Date(1286604000 * 1000), 3128], [new Date(1286690400 * 1000), 2713], [new Date(1286776800 * 1000), 2117], [new Date(1286863200 * 1000), 3174], [new Date(1286949600 * 1000), 3051], [new Date(1287036000 * 1000), 3582], [new Date(1287122400 * 1000), 3472], [new Date(1287208800 * 1000), 3928], [new Date(1287295200 * 1000), 3688], [new Date(1287381600 * 1000), 2547], [new Date(1287468000 * 1000), 1549], [new Date(1287554400 * 1000), 3008], [new Date(1287640800 * 1000), 2309], [new Date(1287727200 * 1000), 2973], [new Date(1287813600 * 1000), 3805], [new Date(1287900000 * 1000), 3643], [new Date(1287986400 * 1000), 2310], [new Date(1288072800 * 1000), 2323], [new Date(1288159200 * 1000), 2399], [new Date(1288245600 * 1000), 2305], [new Date(1288332000 * 1000), 2393], [new Date(1288418400 * 1000), 3212], [new Date(1288504800 * 1000), 3348], [new Date(1288591200 * 1000), 2391], [new Date(1288677600 * 1000), 2130], [new Date(1288764000 * 1000), 1896], [new Date(1288850400 * 1000), 1765], [new Date(1288936800 * 1000), 2191], [new Date(1289023200 * 1000), 3008], [new Date(1289109600 * 1000), 3085], [new Date(1289199600 * 1000), 2151], [new Date(1289286000 * 1000), 2011], [new Date(1289372400 * 1000), 2016], [new Date(1289458800 * 1000), 1914]];
         var plot = $.plot($("#placeholder"), [{data: grid_data0}, ], options0);
   });

$("#placeholder").mouseout(function(e){
$("#test").hide();
});

function test() {
//var oCanvas = $("#placeholder");//document.getElementById("placeholder");
//img=document.createElement("img");
//Save
//img.src=oCanvas.toDataUrl();
//Restore
//oCanvas.drawImage(img, 0, 0);
//var oCanvas = $("#placeholder");//document.getElementById("placeholder");
//document.write(document.getElementById('placeholder').toDataUrl());
   Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
//Canvas2Image.saveAsPNG(oCanvas, true);
}
</script>
<a onClick="JavaScript:test();">Click</a>
   </body>
</html>

Answer 1

执行此操作的基本方法是使用canvas.toDataURL("image/png");，但我也找到了此链接

http://nihilogic.dk/labs/canvas2image/

我没有测试过它。

Answer 2

如果你愿意使用Firefox，我写了WWW::Mechanize::Firefox，它可以将页面上的整个页面或元素保存到PNG。

您还可以完全自动化Firefox，我使用ffeedflotr这一小型数据绘图程序来创建flot图表。

Answer 3

您可以查看具有导出和打印功能的HighCharts。它的工作原理是在画布上渲染之前生成SVG中的所有图形。当用户想要图像时，javascript将SVG发送到服务器以转换为图像。有关详细信息，请参阅the Exporting Module。

highcharts的数据结构很好documented，并且不太难以将flot移植到highcharts。他们还有很多可以使用jsFiddle以交互方式玩的例子。

如何将jQuery FLOT Graph保存为.png或其他图像格式？

3 个答案: