On the dynamic site often need to upload their own pictures, and the size of these pictures is unknown, in the display of thumbnails must be scaled in order to visually display the scale. Take the recent Golf website (http://www.changligolfsales.com) as an example.
The site needs to upload a golf product picture, and a thumbnail display on the list, the Site Server support ASP, but do not support aspjpeg such as the generation of thumbnail components, so will upload the picture directly into the thumbnail, you need to scale the scale, if you want to get the long width of the picture, The first way to think about it is to store the long, wide information of the image by ADODB.stream object at the time of uploading to the database and reading the proportions when the page is generated. The obvious disadvantage of this method is that each image should be read and calculated on the server, consuming more resources and adding a page opening delay.
The second method uses JavaScript to shift the amount of computing to the client.
The principle is to use JavaScript on the client to read the size of each picture and scale it after the page load completes (onload trigger).
Copy Code code as follows:
Scales the size of the imagedest picture proportionally, suitable for display in areas with wide W and high H
function Resizeimage (imagedest, W, H)
{
Display box width W, height h
var image = new Image ();
IMAGE.SRC = IMAGEDEST.SRC;
if (image.width>0 && image.height>0)
{
Compare aspect ratio
if (image.width/image.height >= w/h)//Relative Display box: width > Height
{
if (Image.width > W)//Width greater than display box width W, height should be compressed
{
Imagedest.width = W;
Imagedest.height = (image.height*w)/image.width;
}
else//width is less than or equal to the display box width W, the picture is fully displayed
{
Imagedest.width = Image.width;
Imagedest.height = Image.height;
}
}
else//Empathy
{
if (Image.height > H)
{
Imagedest.height = H;
Imagedest.width = (image.width*h)/image.height;
}
Else
{
Imagedest.width = Image.width;
Imagedest.height = Image.height;
}
}
}
}
The above function scales the picture.
The ID of each thumbnail of the golf Web site is set to Imgproductitem, such as: Add a function for a bulk operation:
Copy Code code as follows:
Scales a picture of all the specified IDs within a page
function Rsizeallimagebyid (ID, W, H)
{
var IMGs = document.getelementsbytagname ("img");
for (var i=0; i{
if (imgs[i].id = = ID)
{
Resizeimage (Imgs[i], W, H);
}
}
}
This is added to the body of the page
Copy Code code as follows:
<body onload= "Javascript:init ();" >; Add in head area:
<mce:script language= "JavaScript" ><!--
function init ()
{
Rsizeallimagebyid ("Imgproductitem", 150, 113);
}
--></mce:script>
You can display all the pictures as thumbnails.
