JS實(shí)現(xiàn)按比例縮放圖片的方法(附C#版代碼)

更新時(shí)間：2015年12月08日 12:07:59 作者：仰天一笑

這篇文章主要介紹了JS實(shí)現(xiàn)按比例縮放圖片的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)等比例縮放圖片的原理與具體實(shí)現(xiàn)技巧,并附上C#版的圖片縮放代碼做對(duì)比參考,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)按比例縮放圖片的方法。分享給大家供大家參考，具體如下：

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;
 }
}

使用很簡(jiǎn)單：<img src="../pic.jpg" onload='resizeImage(this,60,90)> 就OK了；

注：等比例放縮的時(shí)候會(huì)出現(xiàn)抖動(dòng)的情況，處理方法很簡(jiǎn)單，你在img的屬性先設(shè)置它的widht和height，這樣的話加載的時(shí)候絕對(duì)不會(huì)超過(guò)這個(gè)尺寸，等你js運(yùn)行好之后就會(huì)調(diào)到你所規(guī)定的比例，絕對(duì)不會(huì)以下?lián)蔚胶艽蟆?/p>

同時(shí)也附上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;//目標(biāo)寬高
  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;
}

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: