JS實(shí)現(xiàn)按比例縮放圖片的方法(附C#版代碼)
本文實(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ì)超過這個(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ì)有所幫助。
相關(guān)文章
JavaScript中偽協(xié)議 javascript:使用探討
javascript:這個(gè)特殊的協(xié)議類型聲明了URL的主體是任意的javascript代碼,它由javascript的解釋器運(yùn)行2014-07-07JS圖片懶加載技術(shù)實(shí)現(xiàn)過程解析
這篇文章主要介紹了JS圖片懶加載技術(shù)實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07JS+CSS實(shí)現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法,實(shí)例分析了javascript實(shí)現(xiàn)查找功能的樣式及相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02原生js實(shí)現(xiàn)新聞列表展開/收起全文功能
本文主要介紹了原生js實(shí)現(xiàn)新聞列表展開/收起全文功能的知識(shí)要點(diǎn)、注意事項(xiàng)以及完整代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01JavaScript中Null與Undefined的區(qū)別解析
這篇文章主要介紹了JavaScript中Null與Undefined的區(qū)別解析,本文給出了多個(gè)代碼實(shí)例講解它們之間的區(qū)別,需要的朋友可以參考下2015-06-06