Web网页图片按比例缩放的JavaScript实现方案

背景与问题描述

在动态网站开发中，用户上传图片的尺寸往往是不确定的。为了美观地展示这些图片，通常需要将它们以缩略图的形式按比例缩放显示。以某高尔夫销售网站为例，可以说明这一需求。

该网站要求上传高尔夫产品图片，并在列表页以缩略图形式展示。由于服务器环境支持ASP但不支持如aspjpeg这样的缩略图生成组件，因此无法在服务器端直接生成缩略图。这就需要在显示时进行等比例缩放，而前提是必须获取图片的原始长宽数据。最初考虑的方法是在上传阶段利用ADODB.STREAM对象读取图片的长宽信息，并将其存入数据库，随后在页面生成时读取这些数据来计算缩放比例。然而，这种方法存在明显缺陷：每次显示图片都需在服务器端读取数据并进行计算，这会大量消耗服务器资源，并增加页面打开的延迟。

客户端缩放方案原理

另一种解决方案是利用JavaScript，将计算过程转移到客户端执行。

其核心原理是：在页面完全载入后（即触发onload事件时），通过JavaScript脚本读取每张图片的实际尺寸，并据此进行缩放处理。

 
// 将imageDest图片的大小按比例缩放，使其适合显示在宽W和高H的区域内
function ResizeImage(imageDest, W, H)
{ 
// 显示框的宽度W和高度H
var image = new Image();
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{ 
// 比较图片纵横比与显示框纵横比
if(image.width/image.height >= W/H)// 相对显示框：宽>高
{ 
if(image.width > W) // 若图片宽度大于显示框宽度W，则需压缩高度
{ 
imageDest.width = W;
imageDest.height = (image.height*W)/image.width;
} 
else // 若图片宽度小于或等于显示框宽度W，则原样显示
{ 
imageDest.width = image.width;
imageDest.height = image.height;
} 
} 
else// 同理处理高度情况
{ 
if(image.height > H)
{ 
imageDest.height = H;
imageDest.width = (image.width*H)/image.height;
} 
else
{ 
imageDest.width = image.width;
imageDest.height = image.height;
} 
} 
} 
} 

上述函数实现了对指定图片的缩放逻辑。

在该高尔夫网站的实现中，每张缩略图的id均被设置为imgProductItem，例如：<img src="<%= imgPath %>" name="imgProductItem" width="150" height="113" border="0" id="imgProductItem" />。其中的150x113代表了显示框的最大尺寸。由于缩放处理函数必须在onload完成后运行，因此HTML中必须预先设定一定的大小，否则在图片载入过程中会出现页面排版错乱，直到执行RsizeAllImageById函数后布局才会恢复正常。

批量处理与页面集成

为了批量处理页面中的图片，可以添加一个批量操作的函数：

 
// 将页面内所有指定id的图片按比例缩放
function RsizeAllImageById(id, W, H)
{ 
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++)
{ 
if(imgs[i].id == id)
{ 
ResizeImage(imgs[i], W, H);
} 
} 
} 

接下来，在页面的body标签中添加onload事件，并在head区域添加相应的脚本即可生效。

 
<body onload="javascript:init();">；在head区添加：
<mce:script language="javascript"><!--
function init()
{ 
RsizeAllImageById("imgProductItem", 150, 113);
} 
// --></mce:script>

通过上述配置，即可将所有指定图片正确显示为缩略图。