...

View Full Version : Resolved Image resizing, must refresh to display image



casperpage
10-13-2008, 08:33 PM
Hi all,

I'm not the most advanced of javascript coders. my issue is that we get images posted to us of all different sizes. but we try and manipulate them so that they meet our standards. we need to do this in a fashion that keeps the proper resolution. so if an image comes in as 480x2000 we want to make that image fit properly int a 4x3 ratio box.

below is the code i'm using. it works properly, in that the images are in the correct ration. the problem is that you MUST hit refresh in order for the images to display, because when the page renders it displays the image EXTREMELY small, so small you almost cant see it. even adding some automatic refresh code wont make it work.


function seeme(location)
{ imgobj = new Image();
imgobj.src = location;
//alert (location);
if (imgobj.width > imgobj.height){
var percentage = 440 / imgobj.width; }
else {
var percentage = 330 / imgobj.height; }

newX= Math.round(imgobj.width * percentage);
newY= Math.round(imgobj.height * percentage);
//alert ("imgobj.width: " + imgobj.width)
//alert("imgobj.height: " + imgobj.height)
//alert("New width: " + newX)
//alert("New height: " + newY)
var return_value = "<img name='detailpic' src='" + location + "' width=" + newX + " Height=" + newY + " >";
//alert (return_value)
return return_value;
}

the problem is that you MUST hit refresh in order for the images to display properly. even adding some automatic refresh code wont make it work(that code is below)


var is_input = document.URL.indexOf('&');
if (is_input == -1 || is_input == 1)
{ location.href = location.href + "&";
location.reload;
}

Here is how i am calling this function:


<script>
document.write(seeme(image_location));
</script>

does anyone have an idea on what is wrong or a better way to do this?

vwphillips
10-14-2008, 12:18 PM
<!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 language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function LoadMain(id,maxtime){
var obj=document.getElementById(id);
if (!obj.main){
obj.main=new Image();
obj.main.src=obj.src;
obj.cnt=0;
obj.maxtime=maxtime||100;
CkLoad(obj);
}
}

function CkLoad(obj){
if (!obj.main.complete&&obj.cnt<=obj.maxtime){
obj.cnt++;
setTimeout(function(){ CkLoad(obj); },100);
}
else {
if (obj.main.complete&&obj.main.width>50) MyFunction(obj);
}
}

function MyFunction(obj){
var imgobj=obj.main,percentage;
if (imgobj.width > imgobj.height) percentage = 440 / imgobj.width;
else percentage = 330 / imgobj.height;
obj.width=Math.round(imgobj.width * percentage);
obj.height=Math.round(imgobj.height * percentage);
}
/*]]>*/
</script></head>

<body onload="LoadMain('tst',100);" >
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50"

>
</body>

</html>

Edit

you will need to change the time to the maximum time it will take the image to load

coothead
10-14-2008, 12:54 PM
Hi there casperpage,

and a warm welcome to these forums. ;)

Here is another example for you to try...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#box {
width:400px;
height:300px;
border:3px double #999;
margin:auto;
}
#mypic {
display:block;
}
.wider {
width:400px;
}
.higher {
height:300px;
}
</style>

<script type="text/javascript">

seeme('http://www.coothead.co.uk/images/blood.jpg');

function seeme(url){
imgobj=new Image();
imgobj.src=url;
}
window.onload=function() {

alert('src="'+imgobj.src+'"\n\n'+
'width="'+imgobj.width+'px"\n\n'+
'height="'+imgobj.height+'px"');

obj=document.getElementById('mypic');

if(imgobj.width>imgobj.height) {
obj.className='wider';
}
else {
obj.className='higher';
}
obj.src=imgobj.src;
}
</script>

</head>
<body>

<div id="box">
<img id="mypic" src="" alt="">
</div>

</body>
</html>

coothead

casperpage
10-14-2008, 03:33 PM
thank you very much. i didnt even think about the time it took to load the images.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum