本文实例讲述了JS实现按比例缩放图片的方法。分享给大家供大家参考,具体如下:
js版本:
function resizeImage(obj, MaxW, MaxH)
{
var imageObject = obj;
var state = imageObject.readyState;
if(state!='complete')
{
setTimeout("resizeImage("+imageObject+","+MaxW+","+MaxH+")",50);
return;
}
var oldImage = new Image();
oldImage.src = imageObject.src;
var dW = oldImage.width;
var dH = oldImage.height;
if(dW>MaxW || dH>MaxH)
{
a = dW/MaxW; b = dH/MaxH;
if( b>a ) a = b;
dW = dW/a; dH = dH/a;
}
if(dW > 0 && dH > 0)
{
imageObject.width = dW;
imageObject.height = dH;
}
}
使用很简单: 就OK了;
注:等比例放缩的时候会出现抖动的情况,处理方法很简单,你在img的属性先设置它的widht和height,这样的话加载的时候绝对不会超过这个尺寸,等你js运行好之后就会调到你所规定的比例,绝对不会以下撑到很大。
同时也附上C#版本的
////// 按比例缩放图片 /// /// 图片的路径 /// 图片的高度 /// 图片的宽度 ///public static string GetImageSize(string imgUrl,int imgHeight,int imgWidth) { string fileName = System.Web.HttpContext.Current.Server.MapPath(imgUrl); string strResult = string.Empty; if(System.IO.File.Exists(fileName) && imgHeight != 0 && imgWidth != 0) { decimal desWidth;decimal desHeight;//目标宽高 System.Drawing.Image objImage = System.Drawing.Image.FromFile(fileName); decimal radioAct = (decimal)objImage.Width/(decimal)objImage.Height;//原始图片的宽高比 decimal radioLoc = (decimal)imgWidth/(decimal)imgHeight;//图片位的宽高比 if(radioAct > radioLoc)//原始图片比图片位宽 { decimal dcmZoom = (decimal)imgWidth/(decimal)objImage.Width; desHeight = objImage.Height*dcmZoom; desWidth = imgWidth; } else { decimal dcmZoom = (decimal)imgHeight/(decimal)objImage.Height; desWidth = objImage.Width*dcmZoom; desHeight = imgHeight; } objImage.Dispose(); //释放资源 strResult = "width="" + Convert.ToString((int)desWidth) + "" height="" + Convert.ToString((int)desHeight) + "" "; } return strResult; }
希望本文所述对大家Javascript程序设计有所帮助。



