基於JQuery實現的圖片自動進行縮放和裁剪處理

來源:互聯網
上載者:User

 頁面載入後,對不合比例的圖片自動進行縮放和裁剪處理,相容映像已在緩衝或不在緩衝的情況,基於JQuery

其實很早就想寫一個這樣的效果,至於原因?進來這個筆記,我相信你懂的。一般門戶網站,缺少不了大量的圖片展示,而為了網站美觀,圖片又有各種不同尺寸,專業的網站編輯人員,會把圖片處理成等比例的圖片再上傳,把網站弄得很好看,可惜,我想說,我遇到90%的網站編輯人員都是不專業的。為了不讓網站編輯人員毀掉我的心血,我決定做這樣一個事情。 1、首先,在CSS裡對圖片定義好大小,如果JS不執行,就能看到展開的圖片,也就是最正常的表現;2、對每個定義圖片大小的CSS多定義一個不常用的容器,這裡我選用了斜體標籤<cite></cite>,並定義其CSS與同根img的CSS一模一樣,並定義該容器裡的img的CSS樣式迴歸margin:0;padding:0;我是這樣做的:  代碼如下:/*公用*/cite{display:block;overflow:hidden;overflow:hidden !important;} /*某容器*/#BigPic img{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;}#BigPic cite{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;}#BigPic cite img{display:block;margin:0px;padding:0px;border:none;}  3、定義圖片處理函數,參考圖片被定義的大小和原始大小,在保持比例的前提下填充滿位置,再裝進裁剪容器;My Code: 代碼如下://圖片尺寸判斷與處理,用裁剪容器包圍 - By COoLfunction cutImgz(obj){    var image=new Image();    image.src=obj.src;     $this=$(obj);    var iwidth=$this.width();//擷取在CSS裡固定的圖片顯示寬度    var iheight=$this.height();//擷取在CSS裡固定的圖片顯示高度    if(1*image.width*iheight!=1*iwidth*image.height){        //原始圖片的尺寸與CSS裡固定的圖片尺寸比例不一致,則進行處理        if(image.width/image.height>=iwidth/iheight){            $this.height(iheight+'px');            $this.width((image.width*iheight)/image.height+'px');        }        else{            $this.width(iwidth+'px');            $this.height((image.height*iwidth)/image.width+'px');        }         //用cite裝起來,做出裁剪效果        $this.wrap('<cite />');    }}  4、在載入頁面時遍曆所有圖片,判斷其是否在緩衝中,在緩衝中則直接進行處理,不在緩衝中則通過onload觸發處理;(因為在緩衝的圖片秒load,在定義onload事件之前就已經load好,導致onload事件不被觸發;而不在緩衝的圖片,若直接處理,圖片未load出來,原始大小會被Image對象認為是空圖,width和height都是0)My Code:  代碼如下:$('img').each(function(){    var image=new Image();    image.src=this.src;    if(image.complete){        //存在緩衝中,立即處理        cutImgz(this);    } else{        //不存在緩衝中,onload處理        this.onload=function(){            cutImgz(this);        }    }});
相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。