首页 > 语言 > JavaScript > 正文

JS实现按比例缩放图片的方法(附C#版代码)

2024-05-06 16:25:54
字体:
来源:转载
供稿:网友
这篇文章主要介绍了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程序设计有所帮助。



注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选