Saving Images with Javascript

[Rami A. Kishek]

I'm new to js. Please help me figure this out

WANT: Client to save an image to disk pressing a "download" button.
The image name is dynamic, from JS code on another part of the
page
DID: Read somewhere I can use document.execCommand("SaveAs") to do it
This solves it for MSIE, at least. My code is below

PROBLEM: What actually happens with MSIE is:
1) A window pops up promting me to save as.
2) The filename is correct, but the saveas type shown in the
box is limited to "html" and "txt"
3) The "image" that is saved is not an image, but an
HTML file containing the link to the image!! This is
NOT what I want!

PLEASE help. How do I get MSIE to save the actual image instead?
PS With netscape, instead of the saveas dialogue, a window opens with
the image displayed. By clicking <CTRL-S> I can save the actual image.

CODE ----

dld = function(picname, dirpath) {
// This method downloads the slide at the specified resolution.

var newwindow;

obj = dirpath+picname

newWindow = window.open( obj, "SaveImage",
"directories=no,status=no,menubar=no,toolbar=no,re sizable=no,top=100000,left=100000,width=0,height=0 ");
newWindow.document.execCommand('SaveAs', true);
newWindow.close();
return false;
}

example invocation:

<A ID="ss_view" HREF="javascript:dld('pic.jpg','../Photos/')">
<SPAN><img src="../imgs/dld.gif" alt="Download" border="0"></SPAN></A>

[Robert]

In article <40***************@ebte.umd.edu>,
"Rami A. Kishek" <ra****@ebte.umd.edu> wrote:

PLEASE help. How do I get MSIE to save the actual image instead?
PS With netscape, instead of the saveas dialogue, a window opens with
the image displayed. By clicking <CTRL-S> I can save the actual image.

Javascript doesn't have any Input/Output functions as part of the
language. You wouldn't want someone overwriting a system file when you
visited a random web site.

If the ctrl-s solution is good enough, why don't you put the image into
it's own window and let the user do the ctrl-s. Also, I assume you know
that the user can right click on the image to save.

To get what you propose to work, you will have to do a proprietary
solution for each web browser. You will miss some.

I do not know the audience for you application, but the typical web user
should realize that the typical web application doesn't implement what
you are proposing. The typical user should know the can right click to
save an image. The typical user won't miss the lack of a special save
image button.

In summary, skip this feature.

Robert

[Rami A. Kishek]

Thanks. My audience here is very limited. I like to share a personal
family album with friends/ family / etc. The problem is that some
people may want to download a large amount of photos but not everything,
so pressing a button to do it is easier on the fingers than
right-clicking and save as. I also have zipfiles available for those
with mega-throughput networks, but since those files are huge and many
contain many photos that my users would NOT want to download, I like to
give them the other option of downloading one by one.

Of course, I do not intend to over-write files. The solution I began
implementing, with Explorer's document.execCommand('SaveAs', true) opens
up a dialog box asking them where to save, so its safe. Unfortunately,
yes I am married to Explorer with my application, as I use dynamic
tables and (with my limited experience), I found it pretty hard to
change table layouts after the fact with Javascript (e.g. try changing
colSpan for a cell). So IE provides a nice feature called swapNode
which does it. Anyway, luckily my audience is limited so I don't have
to worry about cross-platform compaitibilty (though I myself use Mozilla
on Linux for browsing).

Anyway, to cut a long story short, does anyone have a clue why the
execCommand("SaveAs") is behaving so strangely?

Robert wrote:

Javascript doesn't have any Input/Output functions as part of the
language. You wouldn't want someone overwriting a system file when you
visited a random web site.

If the ctrl-s solution is good enough, why don't you put the image into
it's own window and let the user do the ctrl-s. Also, I assume you know
that the user can right click on the image to save.

To get what you propose to work, you will have to do a proprietary
solution for each web browser. You will miss some.

I do not know the audience for you application, but the typical web user
should realize that the typical web application doesn't implement what
you are proposing. The typical user should know the can right click to
save an image. The typical user won't miss the lack of a special save
image button.

[Vincent van Beveren]

Hi,

The problem is that IE hasn't detected what kind of document it is, in
other words, you are too quick.

Something like this should work for IE:

var win;

function check() {
if (win.document.readyState=='complete'){
win.document.execCommand("SaveAs");
win.close();
} else {
window.setTimeout('check();',1000);
}
}

function saveImage() {
win = window.open('prutserprijs.gif','win');
window.setTimeout('check();',1000);
}

good luck,
Vincent

[Robert]

In article <40***************@ebte.umd.edu>,
"Rami A. Kishek" <ra********@yahoo.com> wrote:

Thanks. My audience here is very limited. I like to share a personal
family album with friends/ family / etc. The problem is that some
people may want to download a large amount of photos but not everything,
so pressing a button to do it is easier on the fingers than
right-clicking and save as. I also have zipfiles available for those
with mega-throughput networks, but since those files are huge and many
contain many photos that my users would NOT want to download, I like to
give them the other option of downloading one by one.

I wrote up a sample javascript file to facilitate the downloading of
image files. How the browser reacts depends on the mime type. I tried
tgz and gif. I tested this under netscape 7.1 and ie 5.2 on MacOS
10.2.6.

I am not able to get document.execCommand('SaveAs', true) to work on
MacOS, so I am not able to help you there.
Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>download experiment</title>
<script type="text/javascript">
function dld(objurl) {

var newWindow = window.open( objurl, "SaveImage",
"resizable,status=no,menubar=no,toolbar=no");

return false;
}

</script>

</head>

<body>

<p>I do not have a PC zip file, but I'll try a MacOS tgz file.</p>
<a
href="http://sveinbjorn.vefsyn.is/files/software/osxutils-1.4.tgz">
<b>Download Now</b></a>
<br>
<br>
<br>
<p>Let's try to download an image.</p>
<p>To download the image below, click on the image. The image will come
up in a new window. In the new window, press control-s which will
bring up the save diaglog box.</p>
<A ID="ss_view"
onclick="dld('http://image.versiontracker.com/images/dlbug.gif')"
HREF="http://image.versiontracker.com/images/dlbug.gif">
<img src="http://image.versiontracker.com/images/dlbug.gif"
alt="Download" border="0"></A>

</body>
</html>

[Rami A. Kishek]

Thanks so much! Exactly what I was looking for

Vincent van Beveren wrote:

The problem is that IE hasn't detected what kind of document it is, in
other words, you are too quick.