Solved

Enable the ability to "Double-Click" on image and invoke the "Save Picture As" dialog box

Posted on 2006-06-09
12
418 Views
Last Modified: 2012-08-14
I need an application (possibly javascript) to include in a webpage I am developing to enable the website visitor to "double-click" on an image and have the "Save Picture As" dialog box become available to them. I realize that a user could simply "right-click" on an image and then choose "save picture as.."; however I am creating this site for European users and they just don't seem to get the "right-click" concept.

I have tried the following script:

HEADER:
function saveFile (fname)
{
document.execCommand('SaveAs',null,fname)
}

BODY:
<a href=javascript:null() ondblclick="saveFile('newspaper.jpg');">Download</a>


This is ALMOST working, it gives me two problems:

1) It opens the "Save" dialog box - but for "Save HTML document" (I need it to save an image)

2) Then it gives me the following error:

"An error has occured in the script on this page.
Line: 1
Char: 8
Error: Unterminated string constant
Code: 0
0
Comment
Question by:KellyNormand
12 Comments
 
LVL 30

Expert Comment

by:callrs
ID: 16871410
<html>
<script type="text/javascript">
function saveFile (fname)
{document.execCommand('SaveAs',null,fname);}
</script>
BODY:
<a href=javascript:null() ondblclick="saveFile('newspaper.jpg');">Download</a>
</html>
0
 
LVL 25

Expert Comment

by:SStory
ID: 16873499
Question...

If the image is hyperlinked to the same image, then when they click on it, it will automatically open the save as dialog since it is trying to download a file.

Example:

<a href="images/myimage.jpg"><img src="images/myimage.jpg" border=0></a>

Wouldn't this do what you want and a lot simpler?

HTH,

Shane
0
 

Author Comment

by:KellyNormand
ID: 16873673
The script from "callrs" doesn't work, it gives me the same error as my script.

And when I tried the solution from "SStory" all that happens is a new window opens up with the image in it.
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 5

Expert Comment

by:Nerdx
ID: 16878492
SSory, that will only work with files (i.e. *.mp3, *.wmv etc) not images. Images just open in a new window and are just displayed.

# Nerd
0
 
LVL 25

Expert Comment

by:SStory
ID: 16885001
hmm.
Sorry it didn't work.  I guess the browser just recognizes the image type.  Would having a compressed zipped version of the image be out of the question?  A zip file would probably download--although admittedly this would be more trouble.
0
 
LVL 30

Expert Comment

by:callrs
ID: 16885671
http://groups.google.ca/group/comp.lang.javascript/browse_thread/thread/9852d796d9196ee0/e9bc7467c7201daa?hl=en#e9bc7467c7201daa "How to invoke "save picture as" with right mouse click"
http://groups.google.ca/group/comp.lang.javascript/browse_thread/thread/4d15d9824ab179a0/58d20dcfe4737017?hl=en#58d20dcfe4737017 "can I call the "save picture as" menu choice from javascript?"
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21874636.html     "Right-click and copy picture"
Above three links say it's not possible


http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20630608.html    "Save Picture As" code
Accepted answer has a link THATS BROKEN, with no info on the solution


www.webdeveloper.com/forum/archive/index.php/t-16756.html GS:execcommand save picture as     WebDeveloper.com - Save a jpg image with filename different to source file -->
Khalid Ali09-05-2003, 08:51 AM
Hi Monkey,
Here is what I could come up with.Its an actually pretty neat work around.:D

IE5.5+ only

First execCommand seems to be applied only on document,therefore you can not apply it directly on images.

1. create a hidden iframe
2. with onclick pass the obj to a function
3. in the function load the image in the iframe
4. then use settimeout to about a sec and execute the command on the iframes document
<--

Well I tried & tried, that's the best I've found so far...
0
 
LVL 30

Accepted Solution

by:
callrs earned 250 total points
ID: 16885969
mplungjan, a Javascript Genius Level Expert, says "not possible" while alanmcclure recommends to put the image into a zip:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_10253657.html?query=&clearTAFilter=true     JavaScript: How to call File DownLoad Window of the browser?
tecbuilder: The quick answer is you can't.  These are built in functions of the browser.  What you should do is include instructions as to how people can get the text file and images.  A text file (.txt) can be displayed in a browser window.  If people want to save the file, all they need to do is click on the menu File | Save As (Netscape and MSIE).  For images, people need to right click on the image and select Save Image As (Netscape) or Save Picture As (MSIE).

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20381127.html?query=&clearTAFilter=true     JavaScript: Download option  or save as dialog Box
mplungjan (Javascript Certified Expert. Genius Level): Not possible using script. Use a server side process and return a zipfile and the dialog will present itself.

http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20459204.html?query=&clearTAFilter=true     HTML: Save Image Link/Button
OsirisX: It isn't possible. Internet Explorer and Netscape, as well as most other browsers determine what do to with the file based on its Content-type. If its a recognized content type, like image/jpeg, then it will be handled by the browser. If you want, I can show you how to do this with PHP or perl.

http://www.experts-exchange.com/Web/WebDevSoftware/ColdFusion/Q_20334711.html?query=&clearTAFilter=true     ColdFusion: Download a jpg/gif from an http to my hard drive d:
CFXPERT ("advanced level programmer"): This is not possible to do the way you want it to with any client side scripting.  You will have to write some sort of ActiveX control for this.

http://www.experts-exchange.com/Applications/MS_Office/FrontPage/Q_11549098.html?query=&clearTAFilter=true     Microsoft FrontPage: downloading an image from a hyperlink
alanmcclure: Well, the problem is that the browser can read it, so it does not try to download it to the machine.  There might be a javascript fix for this, but the easy way, is to put the image in a zip file, and then it will download fine.

Wow, that took a lot of clicking lol

There is an alternate way to do it: Users can install a "macro" utility that turns double clicks into a right click when clicked on images at certain websites in the browser.
0
 
LVL 8

Assisted Solution

by:netmunky
netmunky earned 250 total points
ID: 16902222
have double click forward opens a popup  to /fildownload.php?file=fname.ext that does 2 things:

1) add the headers:
Content-disposition: attachment; filename=fname.ext
Content-type: image/jpeg (or whatever)

2) dump the contents of the file (in php, readfile('fname.ext');)

or filedownload.asp
How To Raise a "File Download" Dialog Box for a Known MIME Type
http://support.microsoft.com/kb/q260519/
if you prefer
0
 
LVL 30

Expert Comment

by:callrs
ID: 17213812
Lots of good info compiled here into one spot.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question