Download Image Using Javascript/jQuery
<p>We are using asp.net and c#3.5 implementing a website using quite a lot of jQuery. We would like to download an img from the browser window, but (and here's the trick) in a button click (in addition to right click save as)...</p>

<blockquote>
  <p>Before we get into it, I should state
  that we know that this is an img tag
  and from the front end, we can easily
  download the image using right click
  save as. The only reason we wish to
  download the image from a (say) button
  click is because across the site we
  have download buttons for downloadable
  content (like datatable to excel files
  and pdfs, etc) and we would preferably
  like to keep the standard across the
  website.</p>
</blockquote>

<p>We are producing graphs using <a href="http://www.microsoft.com/downloads/details.aspx?familyid=1D69CE13-E1E5-4315-825C-F14D33A303E9&amp;displaylang=en" rel="nofollow">Microsoft Chart Control</a> which renders the graphs to the screen pretty well. This renders an image to the screen as shown below in an example (using Firebug)</p>

<pre><code>&lt;div align="center" style="margin-top: 30px; margin-bottom: 30px;" id="graph"&gt;
  &lt;img style="border-width: 0px; height: 500px; width: 465px;" alt="Chart Loading" src="/Telma.UI/ChartImg.axd?i=chart_194e3c04c11240a7b7fba3e3e1d76d39_2.jpeg&amp;amp;g=338b984aaab84b1da9a63db3150211e2" borderdashstyle="Solid" id="ctl00_Chart1"&gt;
&lt;/div&gt;
</code></pre>

<p>The img tag is generated from the Chart Control which in the asp is in an <code>&lt;asp:Chart&gt;</code> tag.</p>

<p>Now as an important side note we have in the web.config</p>

<pre><code>&lt;add key="ChartImageHandler" value="storage=session;privateImages=true;timeout=10;deleteAfterServicing=false;WebDevServerUseConfigSettings=true;" /&gt; 
</code></pre>

<p>There is a known bug with MS Chart Control that if you store the image in session variables or memory, that the image is only accessible once and not persisted. <a href="http://social.msdn.microsoft.com/Forums/en/MSWinWebChart/thread/c348de16-1763-449c-ac9d-06c9f0d8aa9f" rel="nofollow">Described here</a></p>

<p>We don't have a physical location for the image when it is created (and most often the Chart Control destorys the image).</p>

<p>What we need is some client side method of downloading this image content from the screen as it is rendered, but without having access to the physical image at the back end. We do not want to use the chart control property:</p>

<pre><code>ImageStorageMode="UseImageLocation"
</code></pre>

<p>Any ideas?</p>

<p>Remember, we are trying to add additional functionality that just right click save as.</p>

<p>EDIT: This needs to work in Firefox and IE.</p>
