javascript - manipulating images

Sharky Forums


Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: javascript - manipulating images

  1. #1
    Tiger Shark
    Join Date
    Mar 2001
    Location
    Next door.
    Posts
    546

    Post javascript - manipulating images

    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"
    BLAH

  2. #2
    Ursus Arctos Moderatis Grizzly's Avatar
    Join Date
    Sep 2000
    Location
    Providence, RI USA
    Posts
    3,077

    Post

    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:
    Code:
    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:

    Code:
    <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?

  3. #3
    Hammerhead Shark
    Join Date
    Oct 2000
    Location
    Toronto, Canada
    Posts
    1,493

    Post

    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 or namgor.com
    DHAHL3seasons GP:73 G:121 A:55 Pts:176 GWG:12 +/-:184
    UWSWA6seasons GP:41 G:53 A:46 Pts:99 GWG:5 +/-:-25
    MCBHL3seasons GP:14 G:20 A:8 Pts:28 GWG:4 +/-:19

    uwcdc.com or monkis.com

  4. #4
    Ursus Arctos Moderatis Grizzly's Avatar
    Join Date
    Sep 2000
    Location
    Providence, RI USA
    Posts
    3,077

    Post

    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.


  5. #5
    Expensive Sushi
    Join Date
    Jul 2001
    Location
    Streamwood, IL (Near Chi-Town)
    Posts
    19

    Post

    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.

  6. #6
    Tiger Shark
    Join Date
    Mar 2001
    Location
    Next door.
    Posts
    546

    Post

    thanks a million Grizzly!

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

  7. #7
    Ursus Arctos Moderatis Grizzly's Avatar
    Join Date
    Sep 2000
    Location
    Providence, RI USA
    Posts
    3,077

    Post

    Originally posted by Milkman:
    thanks a million Grizzly!


    Hey no problemo Milkman If you ever need any other JavaScript done you know who to call.

  8. #8
    Tiger Shark
    Join Date
    Mar 2001
    Location
    Next door.
    Posts
    546

    Post

    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"
    BLAH

  9. #9
    Hammerhead Shark
    Join Date
    Oct 2000
    Location
    Toronto, Canada
    Posts
    1,493

    Post

    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 or namgor.com
    DHAHL3seasons GP:73 G:121 A:55 Pts:176 GWG:12 +/-:184
    UWSWA6seasons GP:41 G:53 A:46 Pts:99 GWG:5 +/-:-25
    MCBHL3seasons GP:14 G:20 A:8 Pts:28 GWG:4 +/-:19

    uwcdc.com or monkis.com

  10. #10
    Ursus Arctos Moderatis Grizzly's Avatar
    Join Date
    Sep 2000
    Location
    Providence, RI USA
    Posts
    3,077

    Post

    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

  11. #11
    Ursus Arctos Moderatis Grizzly's Avatar
    Join Date
    Sep 2000
    Location
    Providence, RI USA
    Posts
    3,077

    Post

    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

    In the meantime, I guess you'll just have to go through em by hand

  12. #12
    Ursus Arctos Moderatis Grizzly's Avatar
    Join Date
    Sep 2000
    Location
    Providence, RI USA
    Posts
    3,077

    Post

    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?

  13. #13
    Tiger Shark
    Join Date
    Mar 2001
    Location
    Next door.
    Posts
    546

    Post

    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"
    BLAH

  14. #14
    Ursus Arctos Moderatis Grizzly's Avatar
    Join Date
    Sep 2000
    Location
    Providence, RI USA
    Posts
    3,077

    Post

    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 \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.


  15. #15
    Hammerhead Shark
    Join Date
    Oct 2000
    Location
    Toronto, Canada
    Posts
    1,493

    Post

    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 or namgor.com
    DHAHL3seasons GP:73 G:121 A:55 Pts:176 GWG:12 +/-:184
    UWSWA6seasons GP:41 G:53 A:46 Pts:99 GWG:5 +/-:-25
    MCBHL3seasons GP:14 G:20 A:8 Pts:28 GWG:4 +/-:19

    uwcdc.com or monkis.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •