如何将jQuery FLOT Graph保存为.png或其他图像格式？
我正在为Jquery使用一个名为FLOT的插件http://code.google.com/p/flot/
渲染图形后，我希望客户端能够将图形保存到文件中以供日后使用。 在不要求客户下载某些工具或图像捕获设备的情况下，如何做到这一点的任何想法？
Graph $(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); } Click 这样做的基本方法是使用canvas.toDataURL("image/png"); 但我也找到了这个链接
http://nihilogic.dk/labs/canvas2image/
我没有测试过它。
如果你愿意使用Firefox，我写了WWW :: Mechanize :: Firefox ，它可以将页面上的整个页面或元素保存到PNG。
你也可以完全自动化Firefox，这是我用ffeedflotr做的，这是一个创建flot chart的小型数据绘图程序。
您可以查看具有导出和打印function的HighCharts 。 它的工作原理是在canvas上渲染之前生成SVG中的所有图形。 当用户想要图像时，javascript将SVG发送到服务器以转换为图像。 有关详细信息，请参阅导出模块 。
highcharts的数据结构已有详细记录，并且不太难以将flot移植到highcharts。 他们还有很多可以使用jsFiddle交互式玩的例子。