js+jquery实现图片裁剪功能_jquery

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

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

复制代码 代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clip</title>
<style type="text/css">
*{ padding:0; margin:0;}
ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px; margin:30px auto; }
li{ float:left; width:500px;}
#container{width:480px; height:480px; margin:0 auto; border:1px solid #999; position:relative;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);}
#container .block{height:100px; width:100px; border:1px solid #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:1px solid #ccc;background:#fff;filter:alpha(opacity=60);opacity:0.6; display:none; font-size:12px; color:#333; ;}
.tips span{ 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:1px solid #CCC; width:0; height:0; margin:0 auto;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);}
.code {
    background: none repeat scroll 0 0 #E3F4F9;
    border: 1px solid #BAE2F0;
    font: 12px "Courier New",Courier,monospace;
    margin: 30px auto;
    padding: 10px 10px 40px;
 width:980px;
}
.code p{ height:24px; line-height:24px;}
.code span{ display:inline-block;zoom:1; margin-right:5px; width:85px; font-weight:bold; color:#00F}
</style>
</head>
<body>
<div class="code">
 <div class="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的样式名   也就是页面上显示left width height top的那个span的样式名 默认是tips</p>
</div>
<ul>
 <li>
     <div id="container"></div>
    </li>
    <li>
     <div id="imgC"></div>
    </li>
</ul>
<script type="text/javascript" src="">http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript">
(function(){
 var dBody = 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);
   var self = this;
   this.block = $('<div class="'+this.blockClass+'">\
     <div action="rightDown" class="rRightDown"></div>\
     <div action="leftDown" class="rLeftDown"></div>\
     <div action="rightUp" class="rRightUp"></div>\
     <div action="leftUp" class="rLeftUp"></div>\
     <div action="right" class="rRight"></div>\
     <div action="left" class="rLeft"></div>\
     <div action="up" class="rUp"></div>\
     <div action="down" class="rDown" ></div>\
       </div>')
   .bind("mousedown.r",function(e){self.start(e)})
   .appendTo(this.container[0]);
   this.tips = $('<span class="'+this.tipsClass+'" />').appendTo(this.container[0]);
   this.setImg();
  },
  setImg : function(){
   var block = this.block;
   var left  = 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();
    
   var block = this.block; 
   if(isMove){
    var left = Math.max(0,e.clientX - this.offset.left - this.x);
    left = Math.min(left,this.offset.width - this.blockOriginal.width);
    var top = 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{
    var offset = this.fun(e);
    block.css(offset);
   }
   
   this.setImg();
   this.moveCallBack();
  },
  down : function(e){
   var blockOriginal = this.blockOriginal,
    sTop = Math.max(dBody.scrollTop,dDoc.scrollTop), //出现垂直方向滚动条时候 要计算这个 
    offset = this.offset;
    
   if(e.clientY-offset.top>=blockOriginal.top-sTop){
    var height = Math.min(offset.height - blockOriginal.top,e.clientY-offset.top-blockOriginal.top+sTop),
     top = blockOriginal.top;
   }else{
    var height = 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){
   var blockOriginal = this.blockOriginal,
    sTop = Math.max(dBody.scrollTop,dDoc.scrollTop),
    offset = this.offset;
   if(e.clientY-offset.top-blockOriginal.height<=blockOriginal.top-sTop){
    var top = 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{
    var height = 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){
   var blockOriginal = this.blockOriginal,
    offset = this.offset;
    
   if(e.clientX - offset.left - blockOriginal.width - blockOriginal.left<=0){
    var left  = Math.max(e.clientX - offset.left,0),
     width = Math.min(blockOriginal.left + blockOriginal.width,blockOriginal.left + blockOriginal.width -(e.clientX-offset.left));
   }else{
    var width = 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){
   var blockOriginal = this.blockOriginal,
    offset = this.offset;
   if(e.clientX-offset.left>=blockOriginal.left){
    var width = Math.min(offset.width - blockOriginal.left,e.clientX - offset.left - blockOriginal.left),
     left  = blockOriginal.left;
   }else{
    var width = 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(){
   var block = 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;
  return new clip(options);
 }
})();
 xx = $("#container").clip({
  imgC : $("#imgC")
 })
</script>
</body>
</html>

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

时间： 2024-12-20 21:21:11

js+jquery实现图片裁剪功能_jquery的相关文章

Android图片裁剪功能实现代码_Android

在Android应用中,图片裁剪也是一个经常用到的功能.Android系统中可以用隐式意图调用系统应用进行裁剪,但是这样做在不同的手机可能表现出不同的效果,甚至在某些奇葩手机上还会出其他更奇怪的问题,所以调用系统功能进行图片裁剪在很多时候对我们来说并不是一个好的选择.这时候就需要我们自己去实现这种裁剪功能了. 功能分析 要完成图片裁剪的功能,我们需要先知道图片裁剪的功能有哪些.图片裁剪之前,我们需要有一个框指示我们需要裁剪的样式合大小.图片显示出来后大小和位置可能并不是我们所期望的,所以我们还需

使用Java代码在Android中实现图片裁剪功能_Android

前言Android应用中经常会遇到上传相册图片的需求,这里记录一下如何进行相册图片的选取和裁剪. 相册选取图片1. 激活相册或是文件管理器,来获取相片,代码如下: private static final int TAKE_PICTURE_FROM_ALBUM = 1; private void takePictureFromAlbum() { Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.setType("image

js/jQuery简单实现选项卡功能

 本篇文章主要是对js/jQuery简单实现选项卡功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 第一种方法是用原生的js代码如下:    代码如下: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>简单选项卡</title>     <style type="text/css"

jQuery Jcrop插件实现图片选取功能_jquery

总的来说,原理很简单,大致流程是:在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片.下面我们就分别对这几个步骤详细展开讨论分析,并在最后附上小demo供大家参考. 1.在页面上加载原图 这个就不用多说了,就是在页面上显示一张图片,一个img标签搞定,不过为了下一步演示,还是贴一下代码 <img src="girl.jpg" alt="" id=&q

Android实现相机拍摄、选择、图片裁剪功能_Android

最近的一些学习心得: 功能实现:点击圆形头像之后可以实现相册上传或者开启相机,然后把得到的图片经过剪裁,把剪裁过的图片设置为头像的背景图 步骤:第一步:自定义一个类,继承ImageView,重写draw方法,实现外观为圆形 第二步:在xml文件中引用该控件 第三步:实现圆形头像的点击事件,点击后显示对话框界面,询问你是打开相册还是相机(自动省略显示对话框的代码) 第四步:根据用户选择情况,打开相册或者相机 第五步:将拍摄的图片或者相册选中的图片进行剪裁,将结果保存在指定内存区域 第六步:更新头像

基于jQuery实现网页打印功能_jquery

直接上代码 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>index</title> </head> <body> <div style="text-align:cent

jquery实现图片切换代码_jquery

本文实例为大家分享了jquery实现图片切换的方法,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js&qu

jquery制作图片时钟特效_jquery

一.生成数字时钟 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); function

jQuery拖动图片删除示例_jquery

复制代码 代码如下: <head> <title></title> <style type="text/css"> #mydiv { width: 900px; background-color: #444; position: absolute; left: 100px; } img { width: 200px; height: 200px; } ul { list-style-type: none; height: 200px; }