Solved

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

Posted on 2006-06-09
12
417 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
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.

 
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

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

821 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