本文介绍了如何将jQuery FLOT图表保存为.png或其他图像格式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我为Jquery使用名为FLOT的插件
绘制图形后，我希望客户机能够将图形保存到文件中以备后用。任何想法如何做到这一点，而不需要客户端下载一些工具或图像捕获设备？
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://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] - GT;
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< title>图< / title>
< link href =layout.css =stylesheettype =text / css>< / link>
<！ - [if IE]>< script language =javascripttype =text / javascriptsrc =lib / flot / excanvas.min.js>< / script>百分比抑制率ENDIF] - GT！;
< script language =javascripttype =text / javascriptsrc =lib / canvas2image / base64.js>< / script>
< script language =javascripttype =text / javascriptsrc =lib / canvas2image / canvas2image.js>< / script>
< script language =javascripttype =text / javascriptsrc =lib / flot / jquery.js>< / script>
< script language =javascripttype =text / javascriptsrc =lib / gChart / jquery.gchart.js>< / script>
< script language =javascripttype =text / javascriptsrc =lib / flot / jquery.flot.js>< / script>
< script language =javascripttype =text / javascriptsrc =lib / flot / jquery.flot.selection.js>< / script>
< script language =javascripttype =text / javascriptsrc =lib / flot / jquery.flot.crosshair.js>< / script>
< script language =javascripttype =text / javascriptsrc =lib / flot / jquery.flot.navigate.js>< / script>
< style>
< / style>
< / head>
< body>
< div id =placeholderstyle =width：1000px; height：400px;>< / div>
< div id =teststyle =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}，
行：{show：true}，
grid：{hoverable：true}};
var grid_data0 = [[new Date（1286172000 * 1000），1219]，[new Date（1286258400 * 1000）， （新日期（1288631200 * 1000），2191]，[新日期（1286517600 * 1000），2471]，[新日期（1286604000 * 1000），3128] ，[新日期（1286690400 * 1000），2713]，[新日期（1286776800 * 1000），2117]，[新日期（1286863200 * 1000），3174]，[新日期（1286949600 * 1000）新日期（1287036000 * 1000），3588]，[新日期（1287122400 * 1000），3472]，[新日期（1287381600 * 1000），2547]，[新日期（1287468000 * 1000），1549]，[新日期（1287554400 * 1000），3008]，[新日期（1287640800 * 1000），2309] [新日期（1287727200 * 1000），2973]，[新日期（1287813600 * 1000），3805]，[新日期（1287900000 *新日期（1287986400 * 1000），2310]，[新日期（1288072800 * 1000），2323]，[新日期（1288159200 * 1000），2399]，[新日期（1288245600 * 1000） ），新日期（1288332000 * 1000），2393]，[新日期（1288418400 * 1000），3212]，[新日期（1288504800 * 1000），3348]，[新日期（1288591200 * 1000）， [新日期（1288664600 * 1000），2130]，[新日期（1288764000 * 1000），1896]，[新日期（1288850400 * 1000），1765]，[新日期（1288936800 * 1000） [新日期（1289109600 * 1000），3085]，[新日期（1289199600 * 1000），2151]，[新日期（1289286000 * 1000），2011]新日期（1289372400 * 1000），2016]，[新日期（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）;
//保存
//img.src=oCanvas.toDataUrl（）;
//还原
//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（）;>点击< / a>
< / body>
< / html>
解决方案
$ c> canvas.toDataURL（image / png）; 但我也发现这个链接给你
我没有测试过它。
I'm using a plugin for Jquery called FLOT http://code.google.com/p/flot/
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>
解决方案
The basic way to do it is using canvas.toDataURL("image/png"); but I also found this link for you
http://nihilogic.dk/labs/canvas2image/
I've not tested it.
这篇关于如何将jQuery FLOT图表保存为.png或其他图像格式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！