下面是我自己写的图片裁剪的功能介绍：
可以利用鼠标拖拉，产生裁剪框
可以改变裁剪框大小
点击确定，返回裁剪数据
原理
完成裁剪的方法有两种：
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 src="https://www.jb51.net/article/images/img_2.jpg" alt=""> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <!-- 左 --> <div></div> <!-- 上 --> <div></div> <!-- 右 --> <div></div> <!-- 下 --> <div></div> <button>确定</button>
其中img_box表示的是裁剪区域，outer表示阴影区域，而img_box中的div是裁剪区域的边框
样式控制如下：