javascript - manipulating images

[Milkman]

Hi All,

Is there a way to change the size of the image or flash movie with javascript? I wrote the code to detect the screen resolution, and then I want to control the size of the image based on the screen resolution. thanks!

~Milkman

------------------
"There are two steps to success: 1. Never tell everything you know 2. See #1"

[Grizzly]

You can usually just set the "WIDTH" and "HEIGHT" parameters of the "embed" or "img" tags with percetage values.

But...I have seen that get a little screwy in Netscape in the past...so if you really want JavaScript to do the calculations, than you can do that pretty easily.

Simply take whatever values you have for the screen width & screen height, and multiply them by whichever percentage you wish to use here.

Then, you can easily use JavaScript's "document.write()" function to write out the img or embed tag for you.

I wrote you a quick function you can use if you'd like.

Place this in the head of your document:

function printImage(ImageSRC,WidthPercentage,HeightPercentage){
DesiredWidth = screen.width*(WidthPercentage*0.01);
DesiredHeight = screen.height*(HeightPercentage*0.01);
document.write("<img src=\""+ImageSRC+"\" width=\""+DesiredWidth+"\" height=\""+DesiredHeight+"\">");
}


Call the function like this:
In the body of your document, you can then call the function like so:


<SCRIPT LANGUAGE="JavaScript"
printImage('logo.gif','50','50');
</SCRIPT>


This for example....would display "logo.gif" with a width and height of 50% respectively.

Make sense?

[namgor]

Altho it showed it is resized, the "real" size isnt changed... I am interest in seeking a quick and clean way to resize every file in my \my pictures directory, anyone know?

------------------
DHAHL3seasons GP:73 G:121 A:55 Pts:176 GWG:12 +/-:184
UWSWA1season GP:9 G:12 A:8 Pts:20 GWG:3 +/-:-3

uwcdc.com (http://www.uwcdc.com) or namgor.com (http://www.namgor.com)

[Grizzly]

Originally posted by namgor:
Altho it showed it is resized, the "real" size isnt changed... I am interest in seeking a quick and clean way to resize every file in my \my pictures directory, anyone know?



If you want to physically resize your image files, than you'll have to do it though Photoshop. If you want to resize all images in a given directory, than I don't believe i know of any programs which can do this for you.

I know Irfanview (www.irfanview.com) offers some nice Batch image conversion / renaming abilities, but Batch resizing is something I don't think it can do.

[BigTitan]

The original question was looking at a way to resize the displayed image dynamically.

If you're looking for an app that will dynamically recreate all your images each time someone hits your site, you're wasting your time, the performance hit on your server alone would be be completly impossible.

[Milkman]

thanks a million Grizzly!

------------------
"There are two steps to success: 1. Never tell everything you know 2. See #1"

[Grizzly]

Originally posted by Milkman:
thanks a million Grizzly!




Hey no problemo Milkman http://www.sharkyforums.com/ubb/biggrin.gif If you ever need any other JavaScript done you know who to call.

[Milkman]

Hey Grizzly,

Thanks again but one more question. In your syntax:

document.write("<img src=\""+ImageSRC+"\" width=\""+DesiredWidth+"\" height=\""+DesiredHeight+"\">");

is there any particular rule where those slashes go? for instance if i wrote:

document.write("<embed src="flash.swf" width="50" height="50">");

where would the slashes go? thanks a lot for your help - i really appreciate it.

------------------
"There are two steps to success: 1. Never tell everything you know 2. See #1"

[namgor]

Grizzly, for my question, I mean, is there a software (executable in my local machine) that can do that? I dont have to do it over the web. Thx!

------------------
DHAHL3seasons GP:73 G:121 A:55 Pts:176 GWG:12 +/-:184
UWSWA1season GP:9 G:12 A:8 Pts:20 GWG:3 +/-:-3

uwcdc.com (http://www.uwcdc.com) or namgor.com (http://www.namgor.com)

[Grizzly]

Originally posted by Milkman:
Hey Grizzly,

Thanks again but one more question.
is there any particular rule where those slashes go?



Yeah it looks like a bunch of garbage but it's actually a pretty simple rule.

All of those back slashes (\) are what's called "escape characters." They're used in order to print characters which normally would not be printable in JavaScript. In this example, we need to print out a string which requires some double quotes (").

For document.write("My string goes here."), the write() function looks for everything between the double quotes, and prints it. If you need to actually print a double quote, than you would be pre-maturely truncating your string. So...this is why we have escape characters.

Anytime you need to print a double quote in you string, you need to preface it with a backslash (\).

So for your example, say you want to print:
document.write("<embed src="flash.swf" width="50" height="50">");

That would throw a bunch of errors because the string would be prematurely truncated, and then there would be all kinds of syntax errors as JavaScript attempts to interpret the latter parts of your string as commands.
So you need to re-write your string like the following:

document.write("<embed src=\"flash.swf\" width=\"50\" height=\"50\">");

In the function I have a few posts above, it looks a little more complicated because I'm building the string with concatenation of variables. So then there's even *more* confusing looking double quotes.

Well I hope that cleared it up http://www.sharkyforums.com/ubb/biggrin.gif

[Grizzly]

Originally posted by namgor:
Grizzly, for my question, I mean, is there a software (executable in my local machine) that can do that? I dont have to do it over the web. Thx!


Yeah I understood you in my post above. I wish I had a good program I could tell you about but I really don't. Irfanview is the best batch image processor I know of, and it doesn't support a batch resize method. There's most likely a program somewhere out there that does, but I've never heard of it myself. I'll keep my eyes peeled, and I'll let you know if I come across one http://www.sharkyforums.com/ubb/biggrin.gif

In the meantime, I guess you'll just have to go through em by hand http://www.sharkyforums.com/ubb/frown.gif

[Grizzly]

Originally posted by namgor:
Grizzly, for my question, I mean, is there a software (executable in my local machine) that can do that? I dont have to do it over the web. Thx!



Waiiiit just a second here, it just kinda dawned on me what you're trying to do here...

Are you just looking for a batch thumbnailer?

[Milkman]

Thanks a lot grizzly. I guess it is like the escape characters in perl like /n for a new line. that cleared up my confusion. thanks a lot again.

~Milkman

------------------
"There are two steps to success: 1. Never tell everything you know 2. See #1"

[Grizzly]

Originally posted by Milkman:
Thanks a lot grizzly. I guess it is like the escape characters in perl like /n for a new line. that cleared up my confusion. thanks a lot again.

~Milkman


Yeah exactly Milkman http://www.sharkyforums.com/ubb/smile.gif \n works in JavaScript as well.
For instance of you alert("Hello!\nWelcome to my crappy web site.");, than it print a new line after "Hello!".

Perl, PHP, and JavaScript all use those escape character conventions, which I really like. That's one of my few hangups with Cold Fusion. Allaire invented their own escape characters, usually, you just have to type the character you want "escaped" twice.

So you got a web site you can show us Milkman? I'd like to see what you're workin' on.

[namgor]

Hi Gizzly, I take a lot of photos using digital camera (model: dc240i) and post them on my website, web space is limited and i need to reduce all the pictures in the directory by 50% before posting them on the web.

------------------
DHAHL3seasons GP:73 G:121 A:55 Pts:176 GWG:12 +/-:184
UWSWA1season GP:9 G:12 A:8 Pts:20 GWG:3 +/-:-3

uwcdc.com (http://www.uwcdc.com) or namgor.com (http://www.namgor.com)

[Milkman]

Yes Grizzly, this is for a website I am working on with a couple of friends. It is sort of an amateur attemptat an entertainment site that we hope to take off. It really has nothing to show yet, and we are in the process of getting several domains registered and copyrights passed. we are using some flash with some illustrator graphics and javascript/html. I am learning perl right now. thanks,

~Milkman

------------------
"There are two steps to success: 1. Never tell everything you know 2. See #1"