基于JQuery实现的图片自动进行缩放和裁剪处理


Posted in Javascript onJanuary 31, 2014

其实很早就想写一个这样的效果,至于原因?进来这个笔记,我相信你懂的。
一般门户网站,缺少不了大量的图片展示,而为了网站美观,图片又有各种不同尺寸,专业的网站编辑人员,会把图片处理成等比例的图片再上传,把网站弄得很好看,可惜,我想说,我遇到90%的网站编辑人员都是不专业的。
为了不让网站编辑人员毁掉我的心血,我决定做这样一个事情。

1、首先,在CSS里对图片定义好大小,如果JS不执行,就能看到拉伸的图片,也就是最正常的表现;
2、对每个定义图片大小的CSS多定义一个不常用的容器,这里我选用了斜体标签<cite></cite>,并定义其CSS与同根img的CSS一模一样,并定义该容器里的img的CSS样式回归margin:0;padding:0;
我是这样做的:

/*公用*/
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、定义图片处理函数,参考图片被定义的大小和原始大小,在保持比例的前提下填充满位置,再装进裁剪容器;
我的代码:

//图片尺寸判断与处理,用裁剪容器包围 - 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里固定的图片尺寸比例不一致,则进行处理
        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装起来,做出裁剪效果
        $this.wrap('<cite />');
    }
}

4、在加载页面时遍历所有图片,判断其是否在缓存中,在缓存中则直接进行处理,不在缓存中则通过onload触发处理;
因为在缓存的图片秒load,在定义onload事件之前就已经load好,导致onload事件不被触发;而不在缓存的图片,若直接处理,图片未load出来,原始尺寸会被Image对象认为是空图,width和height都是0
我的代码:

$('img').each(function(){
    var image=new Image();
    image.src=this.src;
    if(image.complete){
        //存在缓存中,立即处理
        cutImgz(this);
    } else{
        //不存在缓存中,onload处理
        this.onload=function(){
            cutImgz(this);
        }
    }
});
Javascript 相关文章推荐
javascript demo 基本技巧
Dec 18 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
js 获取时间间隔实现代码
May 12 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
详解node中创建服务进程
May 09 Javascript
javascript实现倒计时效果
Feb 17 Javascript
javascript History对象原理解析
Feb 17 Javascript
jquery为页面增加快捷键示例
Jan 31 #Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 #Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 #Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 #Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 #Javascript
js实现俄罗斯方块小游戏分享
Jan 31 #Javascript
获取select元素被选中的文本内容的js代码
Jan 29 #Javascript
You might like
php 保留字列表
2012/10/04 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
详解react-redux插件入门
2018/04/19 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
简单了解Django模板的使用
2017/12/20 Python
Python常见工厂函数用法示例
2018/03/21 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python开启debug模式的方法
2019/06/27 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
宣传部部长竞选演讲稿
2014/04/26 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers