Solved

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

Posted on 2006-06-09
12
406 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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now