js等比压缩图片实现

// 等比压缩图片工具
    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);
                    });
                }
            })
        }

上面代码是个人在做项目过程中,面对处理图片显示的一些处理。其展示效果类似微信主动推送过来的新闻类型消息,标题含有图片时,需要等比例压缩显示。分享给大家,仅供参考!

另附效果图一张:

js等比压缩图片实现,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。