首先可以先获取原裁剪区域的offsetx，和 offsetY, 该offsetX和offsetY是相对于浏览器的，因此原坐标的x轴和Y轴的 e.clientx 和 e.clientY;
当鼠标移动裁剪区到一个新坐标的时候，会有一个新的 e.clientX 和 e.clientY; 把终点的x轴和Y轴离客户端的距离 – 起点的x轴和Y轴的距离，
就等于移动了多少的距离了，再加上原裁剪区相对于浏览器的 offsetX 或 offsetY后，就是最终相对于浏览器的坐标了；因此；
fw = 终点的x轴坐标(e.clientX) – 起点的x轴坐标(e.clientX) + 原裁剪区相对于浏览器的x轴坐标(offsetX);
fh = 终点的y轴坐标(e.clientY) – 起点的y轴坐标(e.clientY) + 原裁剪区相对于浏览器的y轴坐标(offsetY);
如下图所示：
if (移动后的距离fw小于或等于1的话) {
移动后的cropOffsertX = 1;
} else if ((移动后的距离 + 裁剪区域的宽度) > 图片的宽度的话) {
// 说明移动的裁剪区域越界了，那么就让裁剪区处于中间的位置
移动后的cropOffsertX = 图片的宽度 - 裁剪区的宽度 - 1;
}如下图所示：
else {
移动后的cropOffsertX = fw;
}
同理 if (移动后的距离fh小于或等于1的话) {
移动后的cropOffsertY = 1;
} else if ((移动后的距离 + 裁剪区域的高度) > 图片的高度的话) {
// 说明移动的裁剪区域越界了，那么就让裁剪区处于中间的位置
移动后的cropOffsertY = 图片的高度 - 裁剪区的高度 - 1;
} else {
移动后的cropOffsertY = fh;
}8. 自动截图操作
代码的基本原理是：看组件是否传递了 autoCropWidth 和 autoCropHeight, 如果传递了该参数的宽度和高度的话，那么使用该参数的值，
如果没有传递的话，或者说该宽度和高度的值都为0的话，那么截取的宽度和高度就是图片的宽度和高度的80%；如果传递的宽度w和高度h大于图片的
本身的宽度或高度的话，那么宽度或高度的值就是图片的本身的宽度和高度的值。
如果传递了固定比例的话，那么高度的计算是根据宽度的比例来计算出来的。计算方式还是之前一样的：如下：
w fixedNumber[0] ------------- = ---------------
h fixedNumber[1]因此
h = w / this.fixedNumber[0] * this.fixedNumber[1]如果高度大于图片的高度的话，那么高度就是等于图片的高度，然后根据现在的高度重新计算宽度；
代码如下：
// 如果比例之后 高度大于h
