快捷導(dǎo)航

基于JQuery實(shí)現(xiàn)的圖片自動(dòng)進(jìn)行縮放和裁剪處理

更新時(shí)間：2014年01月31日 19:24:49 作者：

頁(yè)面加載后，對(duì)不合比例的圖片自動(dòng)進(jìn)行縮放和裁剪處理，兼容圖像已在緩存或不在緩存的情況，基于JQuery

其實(shí)很早就想寫(xiě)一個(gè)這樣的效果，至于原因？進(jìn)來(lái)這個(gè)筆記，我相信你懂的。
一般門(mén)戶(hù)網(wǎng)站，缺少不了大量的圖片展示，而為了網(wǎng)站美觀，圖片又有各種不同尺寸，專(zhuān)業(yè)的網(wǎng)站編輯人員，會(huì)把圖片處理成等比例的圖片再上傳，把網(wǎng)站弄得很好看，可惜，我想說(shuō)，我遇到90%的網(wǎng)站編輯人員都是不專(zhuān)業(yè)的。
為了不讓網(wǎng)站編輯人員毀掉我的心血，我決定做這樣一個(gè)事情。

1、首先，在CSS里對(duì)圖片定義好大小，如果JS不執(zhí)行，就能看到拉伸的圖片，也就是最正常的表現(xiàn)；
2、對(duì)每個(gè)定義圖片大小的CSS多定義一個(gè)不常用的容器，這里我選用了斜體標(biāo)簽<cite></cite>，并定義其CSS與同根img的CSS一模一樣，并定義該容器里的img的CSS樣式回歸margin:0;padding:0;
我是這樣做的：

復(fù)制代碼代碼如下:

/*公用*/
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、定義圖片處理函數(shù)，參考圖片被定義的大小和原始大小，在保持比例的前提下填充滿(mǎn)位置，再裝進(jìn)裁剪容器；
我的代碼：

復(fù)制代碼代碼如下:

//圖片尺寸判斷與處理，用裁剪容器包圍 - By COoL
function 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里固定的圖片尺寸比例不一致，則進(jìn)行處理
        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裝起來(lái)，做出裁剪效果
        $this.wrap('<cite />');
    }
}

4、在加載頁(yè)面時(shí)遍歷所有圖片，判斷其是否在緩存中，在緩存中則直接進(jìn)行處理，不在緩存中則通過(guò)onload觸發(fā)處理；
（因?yàn)樵诰彺娴膱D片秒load，在定義onload事件之前就已經(jīng)load好，導(dǎo)致onload事件不被觸發(fā)；而不在緩存的圖片，若直接處理，圖片未load出來(lái)，原始尺寸會(huì)被Image對(duì)象認(rèn)為是空?qǐng)D，width和height都是0）
我的代碼：

復(fù)制代碼代碼如下:

$('img').each(function(){
    var image=new Image();
    image.src=this.src;
    if(image.complete){
        //存在緩存中，立即處理
        cutImgz(this);
    } else{
        //不存在緩存中，onload處理
        this.onload=function(){
            cutImgz(this);
        }
    }
});

您可能感興趣的文章: