提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

js+jquery实现图片裁剪功能

JSjQuery 实现 功能 图片 裁剪
2023-06-13 09:15:38 时间

现在我们在使用各大网站的个人中心时，都有个上传个人头像的功能。用户在上传了个人照片之后，可能不符合网站的要求，于是要求用户对照片进行裁剪，最终根据用户裁剪的尺寸生成头像。这个功能真是太棒了，原来不懂js的时候，感觉很神奇，太神奇了。心想哪天要是自己也能搞明白这里面的技术，那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~

下面我们就来用javascript来实现这个功能吧。

复制代码代码如下:


<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>clip</title>
<styletype="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none;overflow:hidden;zoom:1;width:1000px;margin:30pxauto;}
li{float:left;width:500px;}
#container{width:480px;height:480px;margin:0auto;border:1pxsolid#999;position:relative;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);}
#container.block{height:100px;width:100px;border:1pxsolid#000000;position:absolute;left:50px;top:50px;background:#fff;filter:alpha(opacity=30);opacity:0.3;cursor:move;}
#container.tips{position:absolute;padding:5px;border:1pxsolid#ccc;background:#fff;filter:alpha(opacity=60);opacity:0.6;display:none;font-size:12px;color:#333;;}
.tipsspan{display:inline-block;zoom:1;width:28px;}
.rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;}
.rLeftDown,.rRightUp{cursor:ne-resize;}
.rRightDown,.rLeftUp{cursor:nw-resize;}
.rRight,.rLeft{cursor:e-resize;}
.rUp,.rDown{cursor:n-resize;}
.rRightDown{bottom:-3px;right:-3px;}
.rLeftDown{bottom:-3px;left:-3px;}
.rRightUp{top:-3px;right:-3px;}
.rLeftUp{top:-3px;left:-3px;}
.rRight{right:-3px;top:50%}
.rLeft{left:-3px;top:50%}
.rUp{top:-3px;left:50%}
.rDown{bottom:-3px;left:50%}
#imgC{border:1pxsolid#CCC;width:0;height:0;margin:0auto;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);}
.code{
   background:nonerepeatscroll00#E3F4F9;
   border:1pxsolid#BAE2F0;
   font:12px"CourierNew",Courier,monospace;
   margin:30pxauto;
   padding:10px10px40px;
 width:980px;
}
.codep{height:24px;line-height:24px;}
.codespan{display:inline-block;zoom:1;margin-right:5px;width:85px;font-weight:bold;color:#00F}
</style>
</head>
<body>
<divclass="code">
 <divclass="how">使用方法</div>
   <p>$("#container").clip({
  imgC:$("#imgC"),
       blockClass:"block",
       tipsClass :"tips"       
 });</p>
   <p><span>imgC:</span>表示裁剪图片的容器,也就是右边的图</p>
   <p><span>blockClass:</span>block的样式名 也就是页面上的可以拖动的滑块的样式因为怕和别的页面上的样式重名 默认是block</p>
   <p><span>tipsClass :</span>tips的样式名  也就是页面上显示leftwidthheighttop的那个span的样式名默认是tips</p>
</div>
<ul>
 <li>
    <divid="container"></div>
   </li>
   <li>
    <divid="imgC"></div>
   </li>
</ul>
<scripttype="text/javascript"src="http://common.cnblogs.com/script/jquery.js"></script>
<scripttype="text/javascript">
(function(){
 vardBody=document.body,
  dDoc=document.documentElement,
  ie  =$.browser.msie;
 ie&&($.browser.version=="6.0")
  &&document.execCommand("BackgroundImageCache",false,true); 
 var clip= function(options){
  this.init.call(this,options); 
 }
 clip.prototype={
  options:{
   moveCallBack:function(){},
   blockClass:"block",
   tipsClass :"tips"
  },
  init:function(options){   
   $.extend(this,this.options,options||{});
   if(!this.container||!this.imgC){
    return;
   }
   this.container=$(this.container);
   varself=this;
   this.block=$("<divclass=""+this.blockClass+"">\
     <divaction="rightDown"class="rRightDown"></div>\
     <divaction="leftDown"class="rLeftDown"></div>\
     <divaction="rightUp"class="rRightUp"></div>\
     <divaction="leftUp"class="rLeftUp"></div>\
     <divaction="right"class="rRight"></div>\
     <divaction="left"class="rLeft"></div>\
     <divaction="up"class="rUp"></div>\
     <divaction="down"class="rDown"></div>\
      </div>")
   .bind("mousedown.r",function(e){self.start(e)})
   .appendTo(this.container[0]);
   this.tips=$("<spanclass=""+this.tipsClass+""/>").appendTo(this.container[0]);
   this.setImg();
  },
  setImg:function(){
   varblock=this.block;
   varleft =block.css("left"),
    top  =block.css("top"),
    height=block.height(),
    width =block.width();
   this.imgC.css({
    height:height,
    width:width,
    "background-position":"-"+left+"-"+top
   });
   this.tips.html("left:<span>"+parseInt(left)+"</span>top:<span>"++parseInt(top)+"</span>width:<span>"+width+"</span>height:<span>"+height+"</span>");
  },
  start:function(e){      
   var$elem    =$(e.target),
    block    =this.block,
    self     =this,
    move     =false,
    container=this.container,
    action   =$elem.attr("action");
   //这个每次都要计算基本dom结构的改变浏览器的缩放都会让里面的值发生改变 
   this.offset=$.extend({height:container.height(),width:container.width()},container.offset());
   this.blockOriginal={height:block.height(),width:block.width(),left:parseInt(block.css("left")),top:parseInt(block.css("top"))};
   if(action){
    this.fun=this[action];    
   }else{
    this.x=e.clientX-this.offset.left-this.blockOriginal.left;
    this.y=e.clientY-this.offset.top-this.blockOriginal.top;
    move=true;
   }   
   ie
    &&this.block[0].setCapture();
   this.tips.show();
   $(document)
    .bind("mousemove.r",function(e){self.move(e,move)})
    .bind("mouseup.r",function(){self.end()});   
  },
  end :function(){
   $(document)
    .unbind("mousemove.r")
    .unbind("mouseup.r");
   ie 
    &&this.block[0].releaseCapture();
   this.tips.hide(); 
  },
  move:function(e,isMove){
   window.getSelection
    ?window.getSelection().removeAllRanges()
    :document.selection.empty();
    
   varblock=this.block; 
   if(isMove){
    varleft=Math.max(0,e.clientX-this.offset.left-this.x);
    left=Math.min(left,this.offset.width-this.blockOriginal.width);
    vartop=Math.max(0,e.clientY-this.offset.top-this.y);
    top=Math.min(top,this.offset.height-this.blockOriginal.height);
    block.css({left:left,top:top});    
   }else{
    varoffset=this.fun(e);
    block.css(offset);
   }
   
   this.setImg();
   this.moveCallBack();
  },
  down:function(e){
   varblockOriginal=this.blockOriginal,
    sTop=Math.max(dBody.scrollTop,dDoc.scrollTop),//出现垂直方向滚动条时候要计算这个 
    offset=this.offset;
    
   if(e.clientY-offset.top>=blockOriginal.top-sTop){
    varheight=Math.min(offset.height-blockOriginal.top,e.clientY-offset.top-blockOriginal.top+sTop),
     top=blockOriginal.top;
   }else{
    varheight=Math.min(offset.top+blockOriginal.top-e.clientY-sTop,blockOriginal.top),
     top=Math.max(e.clientY-offset.top+sTop,0);
   }
   return{height:height,top:top};
  },
  up:function(e){
   varblockOriginal=this.blockOriginal,
    sTop=Math.max(dBody.scrollTop,dDoc.scrollTop),
    offset=this.offset;
   if(e.clientY-offset.top-blockOriginal.height<=blockOriginal.top-sTop){
    vartop=Math.max(e.clientY-offset.top+sTop,0),
     maxHeight=blockOriginal.top+blockOriginal.height,
     height=Math.min(maxHeight,blockOriginal.top+blockOriginal.height-(e.clientY-offset.top)-sTop);     
   }else{
    varheight=Math.min(e.clientY-offset.top-blockOriginal.top-blockOriginal.height+sTop,offset.height-blockOriginal.top-blockOriginal.height),
     top=blockOriginal.top+blockOriginal.height;  
   }
   return{height:height,top:top};
  },
  left:function(e){
   varblockOriginal=this.blockOriginal,
    offset=this.offset;
    
   if(e.clientX-offset.left-blockOriginal.width-blockOriginal.left<=0){
    varleft =Math.max(e.clientX-offset.left,0),
     width=Math.min(blockOriginal.left+blockOriginal.width,blockOriginal.left+blockOriginal.width-(e.clientX-offset.left));
   }else{
    varwidth=Math.min(e.clientX-offset.left-blockOriginal.left-blockOriginal.width,offset.width-blockOriginal.left-blockOriginal.width),
     left =blockOriginal.left+blockOriginal.width;
   }
   return{left:left, width:width};
  },
  right:function(e){
   varblockOriginal=this.blockOriginal,
    offset=this.offset;
   if(e.clientX-offset.left>=blockOriginal.left){
    varwidth=Math.min(offset.width-blockOriginal.left,e.clientX-offset.left-blockOriginal.left),
     left =blockOriginal.left;
   }else{
    varwidth=Math.min(offset.left+blockOriginal.left-e.clientX,blockOriginal.left),
     left =Math.max(e.clientX-offset.left,0);
   }
   return{left:left, width:width};
  },
  rightDown:function(e){
   return$.extend(this.right(e),this.down(e));  
  },
  leftDown:function(e){
   return$.extend(this.left(e),this.down(e));
  },
  rightUp:function(e){
   return$.extend(this.right(e),this.up(e));
  },
  leftUp:function(e){
   return$.extend(this.left(e),this.up(e));
  },
  getValue:function(){
   varblock=this.block;
   return{
    left  :parseInt(block.css("left")),
    top   :parseInt(block.css("top")),
    width :block.width(),
    height:block.height()
   }
  }
 }
 $.fn.clip=function(options){
  options.container=this;
  returnnewclip(options);
 }
})();
 xx=$("#container").clip({
  imgC:$("#imgC")
 })
</script>
</body>
</html>

是不是很炫酷啊，小伙伴们，学学本示例的思路吧。

相关文章