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

其实很早就想写一个这样的效果，至于原因？进来这个笔记，我相信你懂的。
一般门户网站，缺少不了大量的图片展示，而为了网站美观，图片又有各种不同尺寸，专业的网站编辑人员，会把图片处理成等比例的图片再上传，把网站弄得很好看，可惜，我想说，我遇到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);
        }
    }
});

赞 (0)

相关推荐

  • 基于jquery的防止大图片撑破页面的实现代码(立即缩放)

    为了防止图片撑破布局,最常见的仍然是通过onload后获取图片尺寸再进行调整,所以加载过程中仍然会撑破.而Qzone日志的图片在此进行了改进,onload完毕后才显示原图.我以前用onload写过一个小例子:http://www.planeart.cn/?p=1022 通过imgReady可以跨浏览器在dom ready就可以实现图片自适应,无需等待img加载,代码如下: (3-17修复网友crossyou 指出的一处错误,并且新版本去掉了替换图片) 复制代码 代码如下: // jquery.a

  • jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)

    本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法.分享给大家供大家参考,具体如下: 综合网上一些代码 自己写的一个图片缩放拖拽的小插件 /** * * <a href="http://lib.csdn.net/base/22" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery<

  • jQuery实现等比例缩放大图片让大图片自适应页面布局

    在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

  • JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

    JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似jQuery的封装. 这里就图片等比缩放以及预加载的效果来尝试下,写写类似的JavaScript代码. 图片等比缩放以及预加载的效果如下(预加载效果有时候会不是很明显): JS主要代码如下: 复制代码 代码如下: (function() { var yQuery = (fun

  • jQuery设置图片等比例缩小的方法

    本文实例讲述了jQuery设置图片等比例缩小的方法.分享给大家供大家参考,具体如下: 网站的内容页面,经常要放图片,如果图片太大会撑出,影响页面美观.如果只是用css限制图片的最大宽度,会引起图片的变形,这里建议还是用js来实现,实现方式如下: <script language="javascript" type="text/javascript"> window.onload = function () { //判断图片大小,超过一定宽度,要通过js定

  • 基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）

    本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下 1.关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现. $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(

  • jquery实现图片按比例缩放示例

    <html> <title></title> <head></head> <style> .thumbnail{overflow:hidden;width:400px;height:240px;} </style> <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <script langu

  • jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(function(){

  • jQuery图片预加载 等比缩放实现代码

    复制代码 代码如下: /* * Image preload and auto zoom * scaling 是否等比例自动缩放 * width 图片最大高 * height 图片最大宽 * loadpic 加载中的图片路径 * example $("*").LoadImage(true,w,h); */ jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic==null)loadpic=".

  • JQuery 图片延迟加载并等比缩放插件

    JQuery 图片延迟加载并等比缩放插件

    最近在学习JS的OOP所以写了这么个东西 使用方法: $(".viewArea img").zoom({height:74,width:103}); 效果演示: http://demo.jb51.net/html/jquery_img/jquery_img.htm代码: 复制代码 代码如下: (function($){ $.fn.zoom = function(settings){ //一些默认配置: settings = $.extend({ height:0, width:0, l

  • 用jquery实现等比例缩放图片效果插件

    复制代码 代码如下: jQuery.fn.autoZoomLoadImage = function(scaling, width, height, loadPic) { if (loadPic == null) loadPic = "Loading.gif"; return this.each(function() { var t = $(this); var src = $(this).attr("src"); var img = new Image(); //a

  • 基于jquery实现等比缩放图片

    基于jquery的图片尺寸调整 resize.js 复制代码 代码如下: $(window).bind("load", function() {     // IMAGE RESIZE     $('#product_list img').each(function() {         var maxWidth = 120;         var maxHeight = 120;         var ratio = 0;         var width = $(this)

  • jquery 图片预加载 自动等比例缩放插件

    jquery 图片预加载 自动等比例缩放插件

    复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大

随机推荐