title: How to save a jQuery FLOT Graph to a .png or other image format?
body: <p>I'm using a plugin for Jquery called FLOT <a href="http://code.google.com/p/flot/" rel="nofollow noreferrer">http://code.google.com/p/flot/</a></p>
  
  <p>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?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;!--[if IE]&gt;&lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
        &lt;title&gt;Graph&lt;/title&gt;
        &lt;link href="layout.css" rel="stylesheet" type="text/css"&gt;&lt;/link&gt;
        &lt;!--[if IE]&gt;&lt;script language="javascript" type="text/javascript" src="lib/flot/excanvas.min.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
        &lt;script language="javascript" type="text/javascript" src="lib/canvas2image/base64.js"&gt;&lt;/script&gt;
        &lt;script language="javascript" type="text/javascript" src="lib/canvas2image/canvas2image.js"&gt;&lt;/script&gt;
        &lt;script language="javascript" type="text/javascript" src="lib/flot/jquery.js"&gt;&lt;/script&gt;
        &lt;script language="javascript" type="text/javascript" src="lib/gChart/jquery.gchart.js"&gt;&lt;/script&gt;
        &lt;script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.js"&gt;&lt;/script&gt;
        &lt;script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.selection.js"&gt;&lt;/script&gt;
        &lt;script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.crosshair.js"&gt;&lt;/script&gt;
        &lt;script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.navigate.js"&gt;&lt;/script&gt;
        &lt;style&gt;
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
  
  &lt;div id="placeholder" style="width:1000px;height:400px;"&gt;&lt;/div&gt;
  &lt;div id="test" style="display: none; background: #ff0; padding: 5px; border: 1px solid #ddd; position: absolute;"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
     $(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);
  }
  &lt;/script&gt;
  &lt;a onClick="JavaScript:test();"&gt;Click&lt;/a&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>