javascript 图片裁剪技巧解读


Posted in Javascript onNovember 15, 2012

学php gd库 看到有图片裁剪 正好整一个 嗯 其实挺简单的
php版

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Resize</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;} 
.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);} 
</style> 
</head> 
<body> 
<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; 
var clip = function(options){ 
this.init.call(this,options); 
} 
clip.prototype = { 
options :{ 
moveCallBack : function(){}, 
className : "block" 
}, 
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.className+'">\ 
<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.setImg(); 
}, 
setImg : function(){ 
var block = this.block; 
this.imgC.css({ 
height: block.height(), 
width : block.width(), 
"background-position" : "-"+block.css("left")+" -"+block.css("top") 
}); 
}, 
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; 
} 
$(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"); 
}, 
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); 
} 
})(); 
$("#container").clip({ 
imgC : $("#imgC") 
}) 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript省市联动实现代码
Feb 15 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
javascript每日必学之封装
Feb 23 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 #Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 #Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 #Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 #Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 #Javascript
jquery offset函数应用实例
Nov 14 #Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 #Javascript
You might like
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
详解Python中where()函数的用法
2018/03/27 Python
python+opencv识别图片中的圆形
2020/03/25 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Python Series从0开始索引的方法
2018/11/06 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
python实现层次聚类的方法
2021/11/01 Python