Gah, need a javascript image resizing script.

JasonStanley · #1 (**permalink**) Oct 21st, 2007, 09:08

I swear JavaScript is the next thing on my list to learn. It doesn't look to hard, just a case of finding the time.

For once Google has failed me.

I need the following script. If someone could convert this into javascript I would be enternally greatful. Should be pretty easy for someone with basic knowledge of JavaScript

imgx = get image width
imgy = get image height

// Desired width and hight

desimgx = 160px
desimgy = 240px

*if imgx > desimgx*
difference = imgx - desimgx
decimalpercent = difference / desimgx

imagewidth = round down(imgx * decimalpercent)
imageheight = round down(imgy * decimalpercent)

*end if and repeat with height*

Return imagewidth and height.

That should work, if someone could write this up or has a better way of doing it then please help me out. Thanks alot.

marSoul · #2 (**permalink**) Oct 21st, 2007, 12:47

i hope i understand what u want, here is a code :

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changeSize() {
    // get current image sizes
    imgx = document.getElementById("pic").offsetHeight;
    imgy = document.getElementById("pic").offsetWidth;
    desimgx = 160;
    desimgy = 240;
    if (imgx > desimgx) {
        difference = imgx - desimgx;
        decimalpercent = difference / desimgx;
        imagewidth = Math.round(imgx * decimalpercent);
        imageheight = Math.round(imgy * decimalpercent);
        document.getElementById("pic").style.height = imageheight + "px";
    } else {
        document.getElementById("pic").style.height = desimgx + "px";
        }
    if (imgy > desimgy) {
        difference = imgy - desimgy;
        decimalpercent = difference / desimgy;
        imagewidth = Math.round(imgx * decimalpercent);
        imageheight = Math.round(imgy * decimalpercent);
        document.getElementById("pic").style.width = imagewidth + "px";
    } else {
        document.getElementById("pic").style.width = desimgy + "px";
        }
}
</script>
</head>
<body>
<img id="pic" src="image.jpg" width="160" height="200"  />
<label>
<input type="submit" onclick="changeSize()" id="button" value="Change" />
</label>
</body>
</html>

JasonStanley · #3 (**permalink**) Oct 21st, 2007, 13:27

Thanks a lot, when I am through with what I am doing I will give it a run out.

RohanShenoy · #4 (**permalink**) Nov 6th, 2007, 18:51

I have showcased my image resizing script at http://javascript.biologyformhtcet.c...ize_image.html
check if its the one you are looking for!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Awesome Image Resizing!	Jack Franklin	Webforumz Cafe	3	Jan 19th, 2008 10:06
image not resizing in Safari	cyberseed	Other Programming Languages	0	Jul 30th, 2007 16:39
Firefox image resizing problem with CSS	paishin	Web Page Design	2	Jun 15th, 2007 13:29
Resizing an image using HTML	Powderhound	Web Page Design	12	Sep 4th, 2006 02:31

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Gah, need a javascript image resizing script.