【原創】jquery等比壓縮圖片實現

// 等比壓縮圖片工具
    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);
                    });
                }
            })
        }

上面代碼是我的在作項目過程當中，面對處理圖片顯示的一些處理。其展現效果相似微信主動推送過來的新聞類型消息，標題含有圖片時，須要等比例壓縮顯示。分享給你們，僅供參考！

爲便於傳參，方法優化以下代碼所示：

//等比壓縮圖片工具 -- by xqs
var proDownImage = function(imgObj){
imgObj = (typeof imgObj == "string") ? $(imgObj) : imgObj;
    $.each(imgObj,function(){
        var img = $(this);
        var setSize = {};
        var obj = {
            width : img.parent().width(),
            height : img.parent().height()   //外容器寬高
        };
        var image = new Image();
        image.src = img.attr("src");    //圖片路徑
        image.onload = function() { // 當加載狀態改變時執行此方法,由於img的加載有延遲
            if (image.complete == true) { // 當加載狀態爲徹底結束時進入
                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 imgArr = $(".newsMsg dt").find("img");
proDownImage(imgArr); 

 

另附效果圖一張：