JS实现按比例缩放图片的方法(附C#版代码)
作者：仰天一笑
这篇文章主要介绍了JS实现按比例缩放图片的方法,结合实例形式较为详细的分析了JavaScript实现等比例缩放图片的原理与具体实现技巧,并附上C#版的图片缩放代码做对比参考,需要的朋友可以参考下
本文实例讲述了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;
}
}
使用很简单：<img src="../pic.jpg" onload='resizeImage(this,60,90)> 就OK了；
注：等比例放缩的时候会出现抖动的情况，处理方法很简单，你在img的属性先设置它的widht和height，这样的话加载的时候绝对不会超过这个尺寸，等你js运行好之后就会调到你所规定的比例，绝对不会以下撑到很大。
同时也附上C#版本的
/// <summary>
/// 按比例缩放图片
/// </summary>
/// <param name="imgUrl">图片的路径</param>
/// <param name="imgHeight">图片的高度</param>
/// <param name="imgWidth">图片的宽度</param>
/// <returns></returns>
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程序设计有所帮助。