js+jquery实现图片裁剪功能


Posted in Javascript onJanuary 02, 2015

现在我们在使用各大网站的个人中心时,都有个上传个人头像的功能。用户在上传了个人照片之后,可能不符合网站的要求,于是要求用户对照片进行裁剪,最终根据用户裁剪的尺寸生成头像。这个功能真是太棒了,原来不懂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>

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

Javascript 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
js实现转动骰子模型
Oct 24 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
javascript 构造函数方式定义对象
Jan 02 #Javascript
深入探寻javascript定时器
Jan 02 #Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 #Javascript
JavaScript中的null和undefined区别介绍
Jan 01 #Javascript
JavaScript中的全局对象介绍
Jan 01 #Javascript
原生javascript获取元素样式
Dec 31 #Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 #Javascript
You might like
一个简单的PHP投票程序源码
2007/03/11 PHP
基于php权限分配的实现代码
2013/04/28 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Pycharm Git 设置方法
2020/09/15 Python
我的中国心演讲稿
2014/09/04 职场文书
工厂见习报告范文
2014/10/31 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
北京爱情故事观后感
2015/06/12 职场文书
公司职员入党自传书
2015/06/26 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
学习党史心得体会2016
2016/01/23 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server