Javascript 如何将 jQuery FLOT Graph 保存为 .png 或其他图像格式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4197468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to save a jQuery FLOT Graph to a .png or other image format?
提问by Josh
I'm using a plugin for Jquery called FLOT http://code.google.com/p/flot/
我正在使用一个名为 FLOT http://code.google.com/p/flot/ 的Jquery 插件
Once the graph is rendered I want the client to be able to save the graph to a file for later. Any idea on how this can be done without requiring the client to download some tool or image capture device?
渲染图形后，我希望客户端能够将图形保存到文件中以备后用。关于如何在不需要客户端下载某些工具或图像捕获设备的情况下完成此操作的任何想法？
<!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>
回答by Hogan
The basic way to do it is using canvas.toDataURL("image/png");but I also found this link for you
这样做的基本方法是使用，canvas.toDataURL("image/png");但我也为您找到了此链接
http://nihilogic.dk/labs/canvas2image/
http://nihilogic.dk/labs/canvas2image/
I've not tested it.
我没有测试过。
回答by Corion
If you are willing to use Firefox, I wrote WWW::Mechanize::Firefox, which can save the whole page or elements on a page to PNG.
如果你愿意使用 Firefox，我写了WWW::Mechanize::Firefox，它可以将整个页面或页面上的元素保存为 PNG。
You can also automate Firefox completely, which I do with ffeedflotr, a small data plotting program that creates flot charts.
您还可以完全自动化 Firefox，我使用ffeedflotr来实现，这是一个创建浮图的小型数据绘图程序。
回答by ericslaw
You might look into HighChartswhich has an export and print feature. It works by generating all the graphics in SVG before rendering on the canvas. When a user wants an image, the javascript sends the SVG to the server for conversion into an image. See the Exporting Modulefor more details.
您可以查看具有导出和打印功能的HighCharts。它的工作原理是在画布上渲染之前生成 SVG 中的所有图形。当用户需要图像时，javascript 将 SVG 发送到服务器以转换为图像。有关更多详细信息，请参阅导出模块。
The data structures for highcharts are well documentedand not too hard to port flot to highcharts. They also have lots of examples you can interactively play with using jsFiddle.
highcharts 的数据结构有据可查，并且不太难将浮图移植到 highcharts。他们还有很多示例，您可以使用 jsFiddle 交互式地玩。
