一：裁剪的思路： 1-1，裁剪区域：需要进行裁剪首先需要形成裁剪区域，裁剪区域的大小和我们的鼠标移动的距离相关联，鼠标移动有多远，裁剪区域就有多大。如下图： 1-2 裁剪区域的宽和高的计算： 如上图，鼠标的横向移动距离和纵向移动距离就形成了裁剪区域的宽和高。那么裁剪区域的宽和高的计算是：当我们点下鼠标时，就能够通过event事件 对象获取鼠标点击位置，e.clientX 和 e.clientY; 当鼠标进行移动的时候，也能通过event获取鼠标的位置，通过两次鼠标位置的改变，就能够获得 鼠标移动的距离。即：初始的x轴位置为 initX = e.clientX, initY = e.clientY; 移动到某个点的位置为：endX = e.clientX, endY = e.clientY; 因此裁剪区域的宽 Tx = endX - initX; 裁剪区域的高是 Ty = endY - initY; 1-3 阴影区域的形成 被我们裁剪图片中除了裁剪区域以外的部分，都属于阴影部分。如下图所示： 那么阴影区域要如何计算呢？比如左阴影宽，左阴影宽 = 裁剪区域的左偏移值 - 图片本身的左偏移值；那么上阴影高 = 裁剪区域的上偏移值 - 图片上偏移值, 如下图所示： 那么下阴影的高度 = 图片本身的高度 - 上阴影的高度 - 裁剪区域的高度；那么右阴影的宽度 = 图片的宽度 - 左阴影宽 - 裁剪区域的宽。 1-4 理解裁剪区域被越界 裁剪图片过程中会出现越界的情况，那么越界又需要分为2种情况， 第一种是：裁剪过程中的越界，第二种是 移动裁剪区域的越界。 1-4-1 裁剪越界 什么是裁剪时越界？ 就是当我们使用鼠标拖动区域裁剪超出了图片的宽度和高度，形成了的越界；如下图所示： 对于这种越界需要判断被裁剪区域的右侧相对于浏览器左侧的位置，不能超过图片右侧的位置相对于浏览器左侧的位置； 且 被裁剪区域的底部相对于浏览器顶部的位置 不能超过 图片的底部相对于浏览器顶部的位置，如下图所示： 1-4-2 移动越界 移动越界指已经形成了裁剪区域了，但是我们可以通过鼠标裁剪区域时产生了越界。其实判断原理和裁剪越界的原理一样的。 2. 图片如何进行压缩？ 当图片的宽度大于容器的宽度，就需要进行压缩；因此 var scale = 容器的宽度 / 图片的宽度； 如果图片的高度 * 缩放比例 > 容器的高度，那么缩放比例 scale = 容器的高度 / 图片的高度；否则的话，不进行压缩。 2-1：对于压缩后 translate3d中的X轴和Y轴移动位置计算方式： x = 容器的宽度 / 压缩比 y = 容器的高度 / 压缩比 即：transform: translate3d(x, y, z) -> translate3d(容器的宽度 / 压缩比 + 'px', 容器的高度 / 压缩比 + 'px', 0) 因此页面布局变成如下： 4. 裁剪的过程中，如何计算裁剪的宽度和高度？ 当我们点下鼠标时，就能够通过event事件对象获取鼠标点击位置，e.clientX 和 e.clientY; 当鼠标进行移动的时候，也能通过event获取鼠标的位置， 通过两次鼠标位置的改变，就能够获得鼠标移动的距离。即： 初始的x轴和Y轴位置分别为 cropX = e.clientX, cropY = e.clientY; 移动后现在的X轴和Y轴的位置分别为：nowX = e.clientX, nowY = e.clientY; 因此裁剪区域的临时值 var fw = ~~(nowX - cropX); 裁剪区域的临时值是 fh = ~~(nowY - cropY); 裁剪图片的时候，有可能往右拖动(值会越来越大)，也有可能往相反的方向(向左)拖动(值会越来越小)，同理，向上或向下拖动也是同一个道理。因此需要判断 fw 和 fh是否大于0的判断；在鼠标按键下去的时候，先获取鼠标相对于事件源元素的X和Y轴坐标，e.offsetX 和 e.offsetY; 因此 cropChangeX = e.offsetX; cropChangeY = e.offsetY; 对于offsetX 和 offsetY 的理解如下； cropOffsertX 就是保存事件源相对于元素的距离。 如果fw 小于0，说明是往左裁剪，那么裁剪的距离 fw = (事件结束的clientX - 事件的开始clientX); 如果 (图片的实际宽度 - e.offsetX) + Math.abs(fw) > 图片的实际宽度 ? this.cropChangeX : Math.abs(fw); 即： 说明往左裁剪的最大宽度只能是 e.offsetX; 不能超过该值，否则的话，就会越界。 此时cropOffsertX偏移值改变了； cropOffsertX = cropChangeX + fw > 0 ? cropChangeX + fw : 0; 如图下所示： 上面分析的是 宽和高不固定比例的裁剪，下面我们来看下 宽和高固定比例的裁剪。 5. 宽和高固定比例裁剪计算； 比如宽和高比是 3:4 这样的截图；fixedNumber = [3, 4] 因此 固定比例高度的计算 fixedHeight 裁剪区域的实际宽度 ------------- = --------------- fixedNumber[1] fixedNumber[0] 因此： 如果固定比例的移动的高度 + Y轴上相对于图片的偏移值 > 大于图片的高度的话，那么裁剪区域的高度(cropH) = 图片的高度(h) - Y轴上相对于图片的偏移值(cropOffsertY); 如下图所示： 获取到了 裁剪区域的高度的话，就可以获取到裁剪区域的宽度了；计算方式是： 同时也要判断fw 是否大于0，来计算 cropOffsertX 的值； fw > 0 说明是往右移动，因此 cropOffsertX = cropChangeX; fw < 0 说明是往左移动，cropOffsertX = 初始的 e.offsetX - 裁剪区域的宽度 即： 6. 理解裁剪区域拉伸原理 控制裁剪区域拉伸的点，共有12种可以拉伸的点，分别有裁剪区域的四根线可以拉伸，有四根线上的八个点可以拉伸；如下图所示： 当鼠标点击拉伸的时候，会触发mousedown事件；因此需要区分下到底是那根线或那个点向什么方向拉伸。因此定义 canChangeX 和 canChangeY 两个变量， 判断是否能改变X轴和Y轴；默认是false；同时定义两个变量为 changeCropTypeX 和 changeCropTypeY，含义是能否改变x轴或Y轴的基准点。默认为1；可以改变。 1. 裁剪区域的最上面的线； 可以上下拉伸, 不能左右拉伸； 因此可以约定： canChangeX = false, canChangeY = true; changeCropTypeX = 0; changeCropTypeY = 1; 2. 裁剪区域左边的线；可以左右拉伸，不能上下拉伸； 因此可以约定：canChangeX = true, canChangeY = false; changeCropTypeX = 1; changeCropTypeY = 0; 3. 裁剪区域底部线; 可以上下拉伸，不能左右拉伸； 因此可以约定：canChangeX = false; canChangeY = true; changeCropTypeX = 0; changeCropTypeY = 2;(为了区分上面的线，因此等于2)； 4. 裁剪区域右边线；可以左右拉伸，不能上下拉伸； 因此可以约定：canChangeX = true; canChangeY = false; changeCropTypeX = 2;（为了区分左边的线） changeCropTypeY = 0; 5. 左上角的点；可以向上或向左移动； 因此 canChangeX = true, canChangeY = true; changeCropTypeX = 1; changeCropTypeY = 1; 6. 上面中间的点，只能上下拉伸，不能左右拉伸； 因此 canChangeX = false, canChangeY = true; changeCropTypeX = 0; changeCropTypeY = 1; 7. 右上角的点，可以左右拉伸和上下拉伸； 因此 canChangeX = true, canChangeY = true; changeCropTypeX = 2; changeCropTypeY = 1; 8. 左中角的点，只能左右拉伸，不能上下拉伸； 因此 canChangeX = true, canChangeY = false; changeCropTypeX = 1; changeCropTypeY = 0; 9. 右中角的点，只能左右拉伸，不能上下拉伸； 因此 canChangeX = true, canChangeY = false; changeCropTypeX = 2; changeCropTypeY = 0; 10. 左下角的点，可以向上或向左移动； 因此 canChangeX = true, canChangeY = true; changeCropTypeX = 1; changeCropTypeY = 2; 11. 下线中间的店，可以上下拉伸，不能左右拉伸； 因此 canChangeX = false, canChangeY = true; changeCropTypeX = 0; changeCropTypeY = 2; 12. 下右角点，可以上下拉伸，左右拉伸； 因此 canChangeX = true, canChangeY = true; changeCropTypeX = 2; changeCropTypeY = 2; 下面来看看移动操作； 6-1 向左或向右拉伸的基本原理： changeCropTypeX === 1 的情况；继续如下判断： 假设裁剪区域的原始宽度为 cropOldW，裁剪区域的原始高度为 cropOldY， cropChangeX 保存原始的裁剪区域相对于图片的e.offsetX； 不管向左拉还是向右拉，裁剪区后的宽度 都等于 = 拉伸前的offsetX(cropChangeX) - 拉伸的距离; 裁剪后的 cropOffsertX = 裁剪区域前的offsertX(cropChangeX) + 拉伸的距离; 如下图所示： 如下图所示： changeCropTypeX === 2 的情况； 说明是裁剪区域右边的线或右边线上的点拉伸了。那也有四种可能值，1. 右边的线，2. 右上角的点，3. 右中角的点。4. 右下角的点。 同理；右边的线拉伸也有向左拉伸和向右拉伸，如果向左拉伸的话，那么fw肯定为负数，如果向右拉伸的话，那么fw就为正数。 这里的 裁剪区域的原始宽度 + 移动距离fw + cropOffsertX <= 图片的宽度的话 也有两种情况，第一种是向左拉伸，第二种是向右拉伸，但是没有拉伸到底， 也就是说拉伸的距离没有到图片的最右边; 现在的图片裁剪区域宽度(cropW) = 图片的原始区域的宽度 + fw(拉伸的距离，向左拉伸或向右拉伸); 否则的话，也就是说拉伸到最右边了，那么 图片裁剪区域宽度(cropW) = 图片的宽度 - 裁剪区域拉伸前的cropOffsertX; 如下图所示： 这边向左拉伸的距离又可以分为2种情况，第一种是 向左拉伸的距离 小于 (原始裁剪区域 + 拉伸前的offsetX); 第二种就是向左拉伸的时候越界了， 那么让拉伸后的宽度还控制在 offsetX的宽度即可，即不越界；因此如下逻辑判断: 现在图片裁剪区域的宽度(cropW) = (图片的宽度w - 拉伸前的offsetX + Math.abs(拉伸的总距离 + 裁剪前的原始距离)) <= 图片的宽度w ？ Math.abs(拉伸的总距离 + 裁剪前的原始距离) : 拉伸前的offsetX; 此时的 cropOffsertX = (图片的宽度w - 拉伸前的offsetX + Math.abs(拉伸的总距离 + 裁剪前的原始距离)) <= 图片的宽度w ？拉伸前的offsetX - Math.abs(拉伸的总距离 + 裁剪前的原始距离) : 0; 如下图所示： 6-2 向上或向下拉伸的基本原理 changeCropTypeY === 1 的情况； 假设裁剪区域的原始宽度为 cropOldH，裁剪区域的原始高度为 cropOldY， cropChangeY 保存原始的裁剪区域相对于图片的e.offsetY， 向上或向下拉伸的距离为fh. 如果是向下拉伸的话，又分为2种情况，第一种是向下拉伸它的距离不超过原始裁剪区域的高度 cropOldH, 第二种是已经超过它的原始裁剪区域的高度了。 如下图所示： 如下图所示： changeCropTypeY === 2 的情况 等于2，说明是裁剪区域下边的线或下边线上的点了。 如下图所示： 如下图所示： 6-3: 向左或向右拉伸且是固定比例拉伸，假设固定比例 3:4, 即 fixedNumber = [3, 4]; 向左或向右拉伸，高度会随着变化。如下图所示： 同样的道理，如果Y轴上的上下线拉伸的话，宽度会跟着变化，也是一样的计算方式： 7. 截图移动操作 首先可以先获取原裁剪区域的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); 如下图所示： 如下图所示： 8. 自动截图操作 代码的基本原理是：看组件是否传递了 autoCropWidth 和 autoCropHeight, 如果传递了该参数的宽度和高度的话，那么使用该参数的值， 如果没有传递的话，或者说该宽度和高度的值都为0的话，那么截取的宽度和高度就是图片的宽度和高度的80%；如果传递的宽度w和高度h大于图片的 本身的宽度或高度的话，那么宽度或高度的值就是图片的本身的宽度和高度的值。 如果传递了固定比例的话，那么高度的计算是根据宽度的比例来计算出来的。计算方式还是之前一样的：如下： 因此 h = w / this.fixedNumber[0] * this.fixedNumber[1] 如果高度大于图片的高度的话，那么高度就是等于图片的高度，然后根据现在的高度重新计算宽度； 代码如下： 自动截图的主要代码如下： github的源码--PC端 总结 以上所述是小编给大家介绍的Vue-cropper 图片裁剪的基本原理及思路讲解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！