首页 > 代码库 > js等比压缩图片实现
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); }); } }) }
上面代码是个人在做项目过程中,面对处理图片显示的一些处理。其展示效果类似微信主动推送过来的新闻类型消息,标题含有图片时,需要等比例压缩显示。分享给大家,仅供参考!
另附效果图一张:
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。