基于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 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
JS高级运动实例分析
Dec 20 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
js实现双人五子棋小游戏
May 28 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
php异常处理方法实例汇总
2015/06/24 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JS继承用法实例分析
2015/02/05 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
微信小程序实现评论功能
2018/11/28 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
浅谈numpy生成数组的零值问题
2018/11/12 Python
python pygame实现2048游戏
2018/11/20 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
爽歪歪广告词
2014/03/20 职场文书
总经理年会致辞
2015/07/29 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript
解析python中的jsonpath 提取器
2022/01/18 Python