js等比壓縮圖片實現

標籤：style   blog   http   color   io   ar   2014   cti   

// 等比壓縮圖片工具    function proDownImage(img) {        var setSize = {};        var obj = {            width : img.parent().width(),            height : img.parent().height()   //外容器寬高        };        var image = new Image();        image.src = img.attr("src");    //圖片路徑        if (image.width > 0 && image.height > 0) {            var ww = obj.width / image.width;            var hh = obj.height / image.height;            var rate = (ww > hh) ? ww: hh;            if (rate <= 1) {                setSize.width = image.width * rate;                setSize.height = image.height * rate;            } else {                setSize.width = image.width;                setSize.height = image.height;            }        }        //設定樣式        img.attr({"width":setSize.width,"height":setSize.height});        //置中顯示        img.css({‘margin-left‘:(-(setSize.width - obj.width) / 2)+‘px‘});        img.css({‘margin-top‘:(-(setSize.height - obj.height) / 2)+‘px‘});    };

//新聞類型訊息標題圖片處理        var newsImg = $(".newsMsg dt").find("img");        if(newsImg[0]){            $.each(newsImg,function(){                var _this = $(this);                if(_this.attr("src")){                    _this.load(function(){                        //等比壓縮圖片                        proDownImage(_this);                    });                }            })        }

上面代碼是個人在做項目過程中，面對處理圖片顯示的一些處理。其展示效果類似主動推送過來的新聞類型訊息，標題含有圖片時，需要等比例壓縮顯示。分享給大家，僅供參考！

另附一張：