基于原生JS的图像裁剪

下面是我自己写的图片剪辑功能介绍：

您可以使用鼠标拖动来生成裁剪框

您可以更改裁剪框的大小

单击“确定”返回剪裁数据

原则

完成剪辑有两种方法：

1.使用HTML5添加拖拽事件拖拽等。

2.传统方法，使用鼠标事件、鼠标按下、鼠标移动等。

这里，我们使用方法2。

裁剪区域的形成

要切割，首先要形成一个切割区域，这个切割区域的形成可以和鼠标移动的距离有关。只要鼠标移动，剪辑区域就会很大。下图：

如上图所示，鼠标的横向移动距离和纵向移动距离共同构成了切割区域的宽度和高度。

以及如何计算横向和纵向运动的距离？当我们点击鼠标时，可以通过事件对象得到鼠标的点击位置，当我们移动鼠标时，也可以通过事件得到鼠标的位置，通过两次改变鼠标位置就可以得到移动距离。

获得鼠标位置的属性是clientX和clientY

阴影区域的形成

下一步是画阴影区域。裁剪图片除裁剪区域外的所有部分都属于阴影部分，该区域可能不会被绘制，绘制该区域是为了让用户更清楚地看到裁剪区域。

我把这个区域分成了四个部分：上、下、左、右，如下图所示：

面积算出来怎么办？此时需要Dom元素的偏移量值。左阴影的宽度由裁剪区域的左偏移值减去图片的左偏移值得到，上阴影的高度由裁剪区域的上偏移值减去图片的上偏移值得到。下图：

在获得左阴影和上阴影的值后，可以用这两个值来计算其他阴影的属性。

有两种方法可以获取图片的偏移值

1.利用offsetLeft和offsetTop值的缺点。如果dom元素有边框边距值，这些值将被计算在内

2.获取dom的css属性预定义css的缺点如果不定义左上角，就无法获取

这两种方法各有缺点，根据不同的情况使用

防止剪辑越界

切割面积是通过鼠标的移动距离来计算的，所以会出现切割面积越界的情况，分为两种类型：

1.切割过程中越界

2.移动剪辑区域时超出界限

然后我们来谈谈如何防止越界。

出界

什么是越界？也就是鼠标拖动的区域超过图片的返回，形成一个跨界，如下图所示：

对于这种逾越，需要判断裁剪区域右侧相对于浏览器左侧的位置不能超过图片右侧相当于浏览器左侧的位置；同时，剪辑区域底部相对于浏览器顶部的位置不能超过图片底部对应浏览器顶部的位置。或绘图来说明：

当TX=PX时，TX的值被强制为固定值。

TX和PX的计算方法是假设裁剪区域是oTailor，图片区域是oPicture:

TX=Otailor . offsetidth Otailor . offsetleft；PX=opic ture . offsetidth opic ture . offsetleft；同样，左侧、上侧和下侧可以根据上述方法进行限制，因此不再详细描述。

移出界限

移出边界意味着已经形成了一个剪辑区域，但是当用鼠标移动剪辑区域时，它超出了边界。这个理解比较简单，就不画介绍了。这个出界和dom拖拽出界限制是一致的，可以通过判断鼠标的移动距离是否超过图片区域来判断。

原理和问题已经解决，现在开始完成实际功能。

准备工作/即将工作

在做之前，做一些准备工作，磨刀不误砍柴。

网页布局准备

网页布局的关键代码如下：

img src='http:/images/img _ 2。jpg ' alt=' div class=' img _ box ' div class=' box _ border 1 '/div class=' box _ border 2 '/div class=' box _ border 3 '/div class=' box _ border 4 '/div class=' box _ handle ' id=' box _ 1 '/div class=' box _ handle ' id=' box _ 2 '/div class=' box _ handle ' id=' box _ 3 '/div class=' box _ handle '-左- d