Image Resize Script Needed

**typomaniac101** · 09-17-2009, 01:51 AM

Hi, I'm putting a guestbook script together(perl) that will allow users to upload pics and need a script to resize uploaded images(proportionately). It doesn't matter if is javascript as long as it will work in any browser. Any help/direction would be greatly appreciated.

**vwphillips** · 09-17-2009, 10:48 AM

just a thought

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.resize{
  width:400px;
}

.resize IMG{
  width:100%;
}
/*]]>*/
</style></head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
<div class="resize" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
</div>
</body>

</html>

**typomaniac101** · 09-18-2009, 05:33 AM

Can't say how much I appreciate your help. I do have a question though(hope I'm not asking to much) and I hate to bite at the hand feeding, but, while this works perfect for width, is their any way possible to put a cap on the height of an image? Once again, thanx. God bless you, Dave

**vwphillips** · 09-18-2009, 09:53 AM

for just height

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.resize{
  height:400px;
}

.resize IMG{
  height:100%;
}
/*]]>*/
</style></head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
<div class="resize" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
</div>
</body>

</html>

for width and height

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
var TO;
var maxmSec=1000; // maximum load time in milliseconds

function Resize(url,w,h,id){
 clearTimeout(TO);
 var img=new Image();
 img.src=url+'?'+Math.random();
 CkLoad(img,w,h,id,new Date());
}

function CkLoad(img,w,h,id,date){
 if (new Date()-date<maxmSec){
  if (img.complete&&img.width>50){
   var r=img.width/img.height;
   if (img.width>w){
    img.width=w;
    img.height=w/r;
   }
   if (img.height>h){
    img.height=h;
    img.width=h*r;
   }
   var obj=document.getElementById(id);
   obj.style.width=img.width+'px'
   obj.style.height=img.height+'px'
   obj.src=img.src;
  }
  else {
   TO=setTimeout(function(){ CkLoad(img,w,h,id,date); },100);
  }
 }
 else {
  alert('unable to load');
 }
}

/*]]>*/
</script>

</head>

<body>
<input type="button" name="" value="Load" onclick="Resize('http://www.vicsjavascripts.org.uk/StdImages/Three.gif',160,40,'tst');"/>
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
</body>

</html>

**typomaniac101** · 09-20-2009, 04:22 PM

A curiosity yet exists. Do I have to create a variable for width and height? Please excuse my ignorance of the issue but I'm not much of a javascript person as can be seen. If that is the case how would the variables be declared?
Once again I thank you. God bless you for your time and effort. I hope some day the favor can be returned.

Thread: Image Resize Script Needed

Thread Tools

Search Thread

Image Resize Script Needed

The Following User Says Thank You to vwphillips For This Useful Post:

Thanx so much

Bookmarks

Bookmarks

Posting Permissions