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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
Web开发之JavaScript
Mar 29 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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接口和抽象类使用示例详解
2014/03/02 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
Python函数调用追踪实现代码
2020/11/27 Python
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
二年级数学教学反思
2014/01/21 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫