下面是我自己写的图片裁剪的功能介绍：
可以利用鼠标拖拉，产生裁剪框
可以改变裁剪框大小
点击确定，返回裁剪数据
原理
完成裁剪的方法有两种：
1、利用HTML5新增拖拽事件drag drop等
2、传统方法，利用鼠标事件，mousedown、mousemove等
在这里，我们采用方法2。
裁剪区域的形成
要进行裁剪首先要形成裁剪区域，这个裁剪区域的形成我们可以与鼠标移动的距离相关联。鼠标移动多远，裁剪区域就有多大。如下图：
如上图所示鼠标的横向移动距离与纵向移动距离共同组成了裁剪区域的宽和高。
而这横向与纵向移动的距离如何计算呢？当我们点下鼠标时，就能够通过event事件对象获取鼠标点击位置，而移动鼠标时，也能够通过event获取鼠标的位置，通过两次鼠标位置的改变，就能够获得鼠标的移动距离。
获取鼠标位置的属性是clientX以及clientY
阴影区域的形成
接下来就是绘制阴影区域。被裁剪图片中除裁剪区域以外的部分，都属于阴影部分，也可以不绘制该区域，绘制该区域是为了让用户更清晰的看清裁剪区域。
我将该区域分成了上下左右四个部分，见下图分布：
那么该区域如果计算呢？这时就要用到Dom元素的偏移值了，利用裁剪区域的左偏移值减去图片本身的左偏移值就是左阴影的宽，利用裁剪区域的上偏移值减去图片的上偏移值，等于上阴影的高度值。如下图：
获取到左阴影、上阴影的值后，就能够通过这两个将其他阴影的属性计算出来。
图片的偏移值有两种取法
1.利用offsetLeft 与 offsetTop 值 弊端 如果dom元素有border margin等值会将这些值计算在内
2.获取dom的css属性 弊端 预定义的css有关 如果没定义left top就无法获取
这两种方法都有各自的弊端，视不同情况来使用
裁剪越界的阻止
裁剪区域的计算是通过鼠标的移动距离来计算的，因此会出现裁剪区域越界的情况，而这情况又分成两种：
1.裁剪过程中越界
2.移动裁剪区域时越界
那么下面就来说说如何防止越界。
裁剪越界
什么是裁剪时越界？就是鼠标拖动区域超出了图片的返回，形成了越界，如下图：
对于这种越界需要判断裁剪区域的右侧相对于浏览器左侧的位置 不能够超过 图片右侧的位置相当于浏览器左侧的位置；同时裁剪区域底部相对于浏览器顶部位置 不能够超过 图片底部相对应浏览器顶部的位置。还是画图来说明：
当TX >= PX 时就让TX的值强制为一固定值。
TX与PX的计算方法，假设裁剪区域为oTailor，图片区域oPicture:
TX = oTailor.offsetWidth + oTailor.offsetLeft; PX = oPicture.offsetWidth + oPicture.offsetLeft;
同理，可以按照上述方法对左侧越界，上侧越界，下侧越界进行限制，就不多赘述。
移动越界
移动越界指的是已经形成了裁剪区域了，但通过鼠标移动裁剪区域时产生了越界。这个理解比较简单，就不画图介绍了。这种越界与dom拖拽越界限制一致，通过判断鼠标移动距离是否超过了图片区域来判断。
原理与问题解决了，现在开始来完成实际功能。
准备工作
在做之前，先做一些准备工作，磨刀不误砍柴功。
网页布局准备
网页布局部分关键代码如下：
其中img_box表示的是裁剪区域，outer表示阴影区域，而img_box中的div是裁剪区域的边框
样式控制如下：
* {
padding:0;
margin:0;
}
body {
background: #454545;
}
.main {
width: 500px;
margin:50px auto;
}
.main img {
width: 500px;
position: absolute;
left: 450px;
top: 50px;
}
.img_box {
overflow: hidden;
position: absolute;
top:0px;
left: 0px;
z-index: 2;
}
.outer {
overflow: hidden;
background: #000;
opacity: 0.4;
position: absolute;
top:0px;
left: 0px;
z-index: 0;
}
.box_border1 ,
.box_border2 ,
.box_border3 ,
.box_border4 {
opacity: 0.5;
}
.box_border1 {
background: url(./images/border-anim-v.gif) repeat-y left top;
}
.box_border2 {
background: url(./images/border-anim-h.gif) repeat-x left top;
}
.box_border3 {
background: url(./images/border-anim-v.gif) repeat-y right top;
}
.box_border4 {
background: url(./images/border-anim-h.gif) repeat-x right bottom;
}
.box_handle {
background: #fff;
border: 1px solid #000;
opacity: 0.5;
}
.confrim {
width: 80px;
height: 35px;
}
布局效果如下：
通用函数
完成图片裁剪，通过上述原理，可以知道需要大量获取标签对象以及标签的css属性等，所以可以编写通用函数，更好的获取这些值。如下：
Dom获取函数
/* 仿JqueryDom获取 */
function $(dom) {
function getDom(dom) {
var str = dom.charAt(0);
switch( str ) {
case '.' :
this.ele = document.getElementsByClassName(dom.substring(1))||null;
break;
case '#' :
this.ele = document.getElementById(dom.substring(1)) || null;
break;
default :
if(document.getElementsByTagName(dom).length) {
this.ele = document.getElementsByTagName(dom);
} else if(document.getElementsByName(dom).length) {
this.ele = document.getElementsByName(dom);
} else {
this.ele = null;
}
}
return this;
};
getDom.prototype.get = function(num) {
return this.ele[num]||this.ele;
}
getDom.prototype.insert = function(value , num) {
this.ele[num].innerHTML = value;
}
return new getDom(dom);
}
Css属性获取函数
Css属性的获取分成两种，一种是IE的，使用currentStyle；另一种是其他主流浏览器，使用getComputedStyle，以下是兼容版本：
/* Css获取 */
function getCss(o , key){
return o.currentStyle&＃63; o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
赋值函数
编写时经常遇到对Dom的样式进行赋值，为方便，我专门编写了一个函数用于赋值：
/**
- 赋值函数
- @param : obj 被赋值对象
- @param : option 进行的操作
- @parma : value 赋值内容
*/
function setAssign(obj , option , value) {
switch(option) {
case 'width':
obj.style.width = value;
break;
case 'height':
obj.style.height = value;
break;
case 'top':
obj.style.top = value;
break;
case 'left':
obj.style.left = value;
break;
case 'position':
obj.style.position = value;
break;
case 'cursor':
obj.style.cursor = value;
}
}
好了准备工作基本完成，现在就正式开始编写。
通过点击与移动事件完成裁剪区域绘制
对图片设置mousedown以及mousemove事件监视，如下：
// 鼠标点击图片触发
oPicture.Onmousedown= function(ev) {
// 事件对象
var oEvent = ev || window.event;
// 初始鼠标位置
var tempX = oEvent.clientX;
var tempY = oEvent.clientY;
// 调整裁剪区域位置
oTailor.style.left = oEvent.clientX + 'px';
oTailor.style.top = oEvent.clientY + 'px';
// 鼠标在图片上移动 绘制裁剪区域 阴影区域
document.Onmousemove= function(ev) {
// 鼠标移动事件对象
var oEvent = ev || window.event;
// 当前鼠标位置减去鼠标之前的鼠标位置 等于 鼠标移动距离
var sLeft = oEvent.clientX - tempX;
var sTop = oEvent.clientY - tempY;
// 裁剪越界限制 只需限制右侧 与 下侧
if((oTailor.offsetLeft+oTailor.offsetWidth) >= (oPicture.offsetLeft+oPicture.offsetWidth)) {
sLeft = oPicture.offsetLeft+oPicture.offsetWidth - oTailor.offsetLeft;
}
if((oTailor.offsetTop+oTailor.offsetHeight) >= (oPicture.offsetTop+oPicture.offsetHeight)) {
sTop = oPicture.offsetTop+oPicture.offsetHeight - oTailor.offsetTop;
}
// 裁剪区域绘制
oTailor.style.width = sLeft + 'px';
oTailor.style.height = sTop + 'px';
// 裁剪区域显示
oTailor.style.display = 'block';
// 阴影区域显示
for (var i = 0; i
阴影区域绘制
/**
* @param：oPicture 图片dom对象
* @param：oTailor 裁剪区域dom对象
* @param：oShadow 阴影区域dom对象
*/
function shadow(oPicture , oTailor , oShadow) {
// 左侧阴影区
setAssign(oShadow[0] , 'width' , (parseInt(getCss(oTailor , 'left')) - parseInt(getCss(oPicture , 'left'))) + 'px');
setAssign(oShadow[0] , 'height' , parseInt(getCss(oPicture , 'height')) + 'px');
setAssign(oShadow[0] , 'left' , parseInt(getCss(oPicture , 'left')) + 'px')
setAssign(oShadow[0] , 'top' , parseInt(getCss(oPicture , 'top')) + 'px')
//右侧阴影区
setAssign(oShadow[2] , 'width' , (parseInt(getCss(oPicture , 'width')) - parseInt(getCss(oTailor ,'width')) - parseInt(getCss(oShadow[0] , 'width'))) + 'px');
setAssign(oShadow[2] , 'height' , parseInt(getCss(oPicture , 'height')) + 'px');
setAssign(oShadow[2] , 'left' , (parseInt(getCss(oTailor , 'left')) + parseInt(getCss(oTailor , 'width'))) + 'px');
setAssign(oShadow[2] , 'top' , parseInt(getCss(oPicture , 'top')) + 'px');
// 上侧阴影区
setAssign(oShadow[1] , 'width' , parseInt(getCss(oTailor , 'width')) + 'px');
setAssign(oShadow[1] , 'height' , (parseInt(getCss(oTailor , 'top')) - parseInt(getCss(oPicture , 'top'))) + 'px');
setAssign(oShadow[1] , 'left' , (parseInt(getCss(oPicture , 'left')) + parseInt(getCss(oShadow[0] , 'width'))) + 'px');
setAssign(oShadow[1] , 'top' , parseInt(getCss(oPicture , 'top')) + 'px');
// 下侧阴影区
setAssign(oShadow[3] , 'width' , parseInt(getCss(oTailor , 'width')) + 'px');
setAssign(oShadow[3] , 'height' , (parseInt(getCss(oPicture , 'height')) - parseInt(getCss(oTailor , 'height')) - parseInt(getCss(oShadow[1] , 'height'))) + 'px');
setAssign(oShadow[3] , 'left' , (parseInt(getCss(oPicture , 'left' )) + parseInt(getCss(oShadow[0] , 'width'))) + 'px');
setAssign(oShadow[3] , 'top' , (parseInt(getCss(oTailor , 'top' )) + parseInt(getCss(oTailor , 'height'))) + 'px');
}
注意在网页实际运用中，如果布局中图片css中没有left或top属性，那么上面代码会产生错误。应该使用offsetLeft与offsetTop代替之。
添加裁剪边框
在放出的布局图中，可以看见裁剪的边沿，四角及四边各有一个小正方形的形状，添加不仅是为了区分裁剪区与非裁剪区，还为下一步添加拉伸裁剪区域提供方便。下面开始编写代码：
/**
* 裁剪边框绘制
* @param : oDIv 所有边框对象
* @param : oHandle 点状边沿
* @param : oTailor 裁剪对象
*/
function tailorBorder(oDiv , oHandle , oTailor) {
// 对边框进行初始化
for (var i = 0; i
布局中，裁剪区域类名为box_handle的div前四个代表四角的点状，后四个表示边沿中间的点状，都按照顺时针分布。完成后效果如下：
监视阴影区域
裁剪区域与阴影区域绘制完成，现在添加一个小功能，当鼠标点击到非裁剪区时(即阴影区)，取消裁剪区域。
京公网安备 11010802041100号