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判断变量是否为数组的方法(Array)
Feb 24 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
微信小程序 navbar实例详解
May 11 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
python实现简单登陆流程的方法
2018/04/22 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python绘制玫瑰的实现代码
2020/03/02 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
保护环境倡议书
2014/04/14 职场文书
门前三包责任书
2014/04/15 职场文书
工商干部先进事迹
2014/05/14 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
学术会议邀请函
2015/01/30 职场文书
2015个人半年总结范文
2015/03/09 职场文书