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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
javascript基本语法
May 31 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
js实现随机点名
2021/01/19 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python中adb有什么功能
2020/06/07 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
机修工岗位职责
2013/11/24 职场文书
青年志愿者活动总结
2014/04/26 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
学校党员对照检查材料
2014/08/28 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书