Download Image Using Javascript/jQuery

Question

Hi all,

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)...

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.

We are producing graphs using Microsoft Chart Control which renders the graphs to the screen pretty well. This renders an image to the screen as shown below in an example (using Firebug)

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

The img tag is generated from the Chart Control which in the asp is in an <asp:Chart> tag.

Now as an important side note we have in the web.config

<add key="ChartImageHandler" value="storage=session;privateImages=true;timeout=10;deleteAfterServicing=false;WebDevServerUseConfigSettings=true;" /> 

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. Described here

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

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:

ImageStorageMode="UseImageLocation"

Any ideas?

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

EDIT: This needs to work in Firefox and IE.

Answer 1

try this,this will promt end user to open or save the file

Response.ContentType = myDataReader.Item(1).ToString Response.AppendHeader("content-disposition:", "attachment; filename=" + myDataReader.Item(2).ToString) Response.WriteFile(Server.MapPath("documents/" & myDataReader.Item(0).ToString))

Answer 2

You could write download script, which forces file passed as parameter to download (bz changing http headers) and then you'll just do something like (jQuery):

$("a#downloadButton").attr("href","link/to/forcedownload.asp?f="+$("#img").attr("src"));

Also don't forget (if you'll do it this way) to clean/sanitize parameters, otherwise people will have the way to download your scripts, if they now the right dir/name.

However, I'm thinking you could do the same thru ASP, if it's not some kind of CMS.

Edit: or done by AJAX... :]
Edit: Read latest response... if you're generating graphs on the fly, it has to be possible to generate the same graph again, if data are the same, isn't it? If yes, then to forcedownload mentioned up, pass the data(or link to them, or handler, or sql or something) and in that script generate new picture and send it directly with force download to client.

Edit: new idea:] Don't run sql 2 times - in parent document, call another script, which runs sql, creates image, saves it to cache and then outputs to browser with image http header - this way, you have image on disk (in some tmp directory), in browser, and can link to image - with one sql. Hope it helps