How To Shrink An Image Into Thumbnail? [Archive]

dealmaker

08-16-2005, 01:43 AM

Hi,
I am loading images from server. The webpage loads pages of images, but I need to shrink them into thumbnails. I don't plan to make real thumbnail pictures for these images, I just load them fullsize but show them in smaller size. I can't set a fix size in html tag because all images are in different sizes and I use the same code for all pages.

I can do the following:

imgElement = document.createElement("IMG");
imgElement.src = "mypic.jpg"
imgElement.style.width = 90 + 'px';
imgElement.style.height = 100 + 'px';

But I want the thumbnail has the same aspect ratio as the original one. But since the image isn't loaded yet, I can't find out the dimension of the original image.

How can I go around this problem?

Many thanks.

Kor

08-16-2005, 08:57 AM

I guess that there is no need to create the element. Just simply hidden the visiblity till the new size is set.

Here's a simple example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</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">
<script type="text/javascript">
var sqr = 1/3; //the "squeeze" ratio
function reSize(){
var oImg = document.getElementById('mypic');
var h = oImg.offsetHeight;
var w = oImg.offsetWidth;
oImg.style.width = Math.round(w*sqr)+'px';
oImg.style.height = Math.round(h*sqr)+'px';
oImg.style.visibility = 'visible';
}
onload = reSize;
</script>
<style type="text/css">

</style>
</head>
<body>
<img id ="mypic" src="00.jpg">
</body>
</html>