vue-cropper 图片裁剪的基本原理
一: 裁剪的思路:
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)
因此页面布局变成如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title > 图片裁剪</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
- <link rel="stylesheet" type="text/CSS" href="./index.css">
- </head>
- <body>
- <div id="app" style="height:500px;margin: 0 auto;">
- <div class="vue-cropper">
- <div class="cropper-box">
- <div class="cropper-box-canvas" style="width:644px;height:642px;transform: scale(0.778816, 0.778816) translate3d(453.252px, -87.312px, 0px) rotateZ(0deg)">
- <img src="https://images2018.cnblogs.com/blog/561794/201804/561794-20180416230443389-1451524334.jp" />
- </div>
- </div>
- <div class="cropper-drag-box cropper-crop"></div>
- </div>
- </div>
- </body>
- </html>
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 的理解如下;
- if (fw> 0) {
- var cropW(裁剪区域的实际宽度) = cropChangeX + fw> w(图片的实际宽度) ? w - cropChangeX : fw;
- cropOffsertX = cropChangeX;
- }
cropOffsertX 就是保存事件源相对于元素的距离.
如果 fw 小于 0, 说明是往左裁剪, 那么裁剪的距离 fw = (事件结束的 clientX - 事件的开始 clientX);
如果 (图片的实际宽度 - e.offsetX) + Math.abs(fw)> 图片的实际宽度 ? this.cropChangeX : Math.abs(fw);
即:
- if (fw <0) {
- var cropW(裁剪区域的实际宽度) = (w - cropChangeX) + Math.abs(fw)> w ? cropChangeX : Math.abs(fw);
- cropOffsertX = cropChangeX + fw> 0 ? cropChangeX + fw : 0;
- }
说明往左裁剪的最大宽度只能是 e.offsetX; 不能超过该值, 否则的话, 就会越界.
此时 cropOffsertX 偏移值改变了; cropOffsertX = cropChangeX + fw> 0 ? cropChangeX + fw : 0; 如图下所示:
上面分析的是 宽和高不固定比例的裁剪, 下面我们来看下 宽和高固定比例的裁剪.
5. 宽和高固定比例裁剪计算;
比如宽和高比是 3:4 这样的截图; fixedNumber = [3, 4]
因此 固定比例高度的计算
fixedHeight 裁剪区域的实际宽度
------------- = ---------------
fixedNumber[1] fixedNumber[0]
因此:
var fixedHeight = ~~(裁剪区域的实际宽度 / fixedNumber[0] * fixedNumber[1]);
如果固定比例的移动的高度 + Y 轴上相对于图片的偏移值> 大于图片的高度的话, 那么裁剪区域的高度(cropH) = 图片的高度(h) - Y 轴上相对于图片的偏移值(cropOffsertY); 如下图所示:
获取到了 裁剪区域的高度的话, 就可以获取到裁剪区域的宽度了; 计算方式是:
cropW(裁剪区域的宽度) = ~~(cropH / fixedNumber[1] * fixedNumber[0]);
同时也要判断 fw 是否大于 0, 来计算 cropOffsertX 的值;
- if (fw> 0) {
- var cropOffsertX = cropChangeX
- } else {
- var cropOffsertX = cropChangeX - cropW
- }
fw> 0 说明是往右移动, 因此 cropOffsertX = cropChangeX;
fw <0 说明是往左移动, cropOffsertX = 初始的 e.offsetX - 裁剪区域的宽度
即:
- if (fixedHeight + cropOffsertY> h) {
- cropH(裁剪区域的高度) = h - cropOffsertY;
- cropW(裁剪区域的宽度) = ~~(cropH / fixedNumber[1] * fixedNumber[0]);
- if (fw> 0) {
- var cropOffsertX = cropChangeX
- } else {
- var cropOffsertX = cropChangeX - cropW
- }
- } else {
- // 否则
- cropH = fixedHeight;
- }
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;
下面来看看移动操作;
- var fw = ~~(移动结束的 clientX - 初始的 clientX);
- var fh = ~~(移动结束的 clientY - 初始的 clientY);
6-1 向左或向右拉伸的基本原理:
- if (canChangeX) {
- // 如果 x 轴能改变的话, 说明是 裁剪区域中左右两根线或是左右两个线上的点了.
- if (changeCropTypeX === 1) {
- // 如果 x 轴的基点能改变的话, 并且等于 1, 说明是裁剪区域左边的线或左边线上的点了.
- // 那就有四种可能值, 1. 左边的线, 2. 左上角的点, 3. 左中角的点. 4. 左下角的点.
- } else if (changeCropTypeX === 2) {
- // 同理, 说明是裁剪区域右边的线或右边线上的点了.
- // 那也有四种可能值, 1. 右边的线, 2. 右上角的点, 3. 右中角的点. 4. 右下角的点.
- }
- }
changeCropTypeX === 1 的情况; 继续如下判断:
假设裁剪区域的原始宽度为 cropOldW, 裁剪区域的原始高度为 cropOldY, cropChangeX 保存原始的裁剪区域相对于图片的 e.offsetX;
if (cropOldW - fw> 0) {
如果裁剪区域的原始宽度 大于 移动的距离的话, 那么说明两点, 第一是向左拉伸的话, fw 为负数, 第二是向右拉伸, 但是拉伸的距离小于裁剪区域的原始宽度
裁剪区域后的宽度 = 图片的宽度 - 拉伸前的 offsetX - 拉伸的距离 <= 图片的宽度的话 ? 拉伸前的 offsetX(cropChangeX) - 拉伸的距离
: 裁剪区原始宽度 + 拉伸前的 offsetX.
裁剪后的 cropOffsertX = 图片的宽度 - 拉伸前的 offsetX(cropChangeX) - 拉伸的距离 <= 图片的宽度的话 ?
裁剪区域前的 offsertX(cropChangeX) + 拉伸的距离 : 0;
}
不管向左拉还是向右拉, 裁剪区后的宽度 都等于 = 拉伸前的 offsetX(cropChangeX) - 拉伸的距离;
裁剪后的 cropOffsertX = 裁剪区域前的 offsertX(cropChangeX) + 拉伸的距离; 如下图所示:
if (cropOldW - fw <= 0) {
裁剪拉伸后的宽度 = 拉伸后的距离 fw + cropChangeX <= 图片的宽度 ? 拉伸后的距离 fw - 拉伸前的裁剪区域的宽度 :
图片的宽度 - 拉伸前的裁剪区域的宽度 - cropChangeX;
裁剪拉伸后的 cropOffsertX = 拉伸前的裁剪区域的 offsetX(cropChangeX) + 裁剪区域之前的宽度;
}
如下图所示:
changeCropTypeX === 2 的情况;
说明是裁剪区域右边的线或右边线上的点拉伸了. 那也有四种可能值, 1. 右边的线, 2. 右上角的点, 3. 右中角的点. 4. 右下角的点.
同理; 右边的线拉伸也有向左拉伸和向右拉伸, 如果向左拉伸的话, 那么 fw 肯定为负数, 如果向右拉伸的话, 那么 fw 就为正数.
- if (cropOldW + fw> 0) {
- // 如果原始的裁剪区域的宽度 + 拉伸的距离大于 0, 说明是向右拉伸或者向左拉伸, 但是向左拉伸的距离小于原始裁剪区域
- if (裁剪区域的原始宽度 + 移动距离 fw + cropOffsertX <= 图片的宽度的话) {
- }
这里的 裁剪区域的原始宽度 + 移动距离 fw + cropOffsertX <= 图片的宽度的话 也有两种情况, 第一种是向左拉伸, 第二种是向右拉伸, 但是没有拉伸到底,
也就是说拉伸的距离没有到图片的最右边;
现在的图片裁剪区域宽度(cropW) = 图片的原始区域的宽度 + fw(拉伸的距离, 向左拉伸或向右拉伸);
否则的话, 也就是说拉伸到最右边了, 那么 图片裁剪区域宽度(cropW) = 图片的宽度 - 裁剪区域拉伸前的 cropOffsertX;
因此此时 cropOffsertX = 拉伸前的裁剪区域的 offsetX(cropChangeX);
}
如下图所示:
- if (cropOldW + fw <=0) {
- // 如果原始裁剪区域的宽度 + 拉伸的距离小于或等于 0 的话, 说明是向左拉伸, 并且拉伸的距离正好大于或等于裁剪区域原始的宽度;
- }
这边向左拉伸的距离又可以分为 2 种情况, 第一种是 向左拉伸的距离 小于 (原始裁剪区域 + 拉伸前的 offsetX); 第二种就是向左拉伸的时候越界了,
那么让拉伸后的宽度还控制在 offsetX 的宽度即可, 即不越界; 因此如下逻辑判断:
现在图片裁剪区域的宽度(cropW) = (图片的宽度 w - 拉伸前的 offsetX + Math.abs(拉伸的总距离 + 裁剪前的原始距离)) <= 图片的宽度 w ? Math.abs(拉伸的总距离 + 裁剪前的原始距离) : 拉伸前的 offsetX;
此时的 cropOffsertX = (图片的宽度 w - 拉伸前的 offsetX + Math.abs(拉伸的总距离 + 裁剪前的原始距离)) <= 图片的宽度 w ? 拉伸前的 offsetX - Math.abs(拉伸的总距离 + 裁剪前的原始距离) : 0;
如下图所示:
6-2 向上或向下拉伸的基本原理
- if (canChangeY) {
- // 如果 Y 轴能改变的话, 说明是 裁剪区域中上下两根线或是上下两个线上的点了.
- if (this.changeCropTypeY === 1) {
- // 如果 Y 轴的基点能改变的话, 并且等于 1, 说明是裁剪区域上边的线或上边线上的点了.
- // 那就有四种可能值, 1. 上边的线, 2. 上左角的点, 3. 上中角的点. 4. 上右角的点.
- } else if(this.changeCropTypeY === 2) {
- // 等于 2, 说明是裁剪区域下边的线或下边线上的点了.
- // 同理也就有四种可能值, 1. 下边的线, 2. 下左角的点, 3. 下中角的点. 4. 下右角的点.
- }
- }
changeCropTypeY === 1 的情况;
假设裁剪区域的原始宽度为 cropOldH, 裁剪区域的原始高度为 cropOldY, cropChangeY 保存原始的裁剪区域相对于图片的 e.offsetY,
向上或向下拉伸的距离为 fh.
如果是向下拉伸的话, 又分为 2 种情况, 第一种是向下拉伸它的距离不超过原始裁剪区域的高度 cropOldH, 第二种是已经超过它的原始裁剪区域的高度了.
- if (原始裁剪区域的高度 cropOldH - 拉伸的距离 fh> 0) {
- // 说明是向上拉伸 (fw 肯定为负数) 或向下拉伸(fw 肯定为正数), 但是向下拉伸的距离不超过原裁剪区域的高度
裁剪区域后的高度 cropH 计算又分为 2 种情况, 第一种是向上拉伸的距离 fh 小于或等于拉伸前的 e.offsetY, 第二种拉伸距离是大于 e.offsetY, 也就是向上
拉伸的时候越界了, 如果越界了, 那么拉伸后的高度 = 裁剪之前的原始高度 + e.offsetY(裁剪区域之前的 offsetY); 因此:
裁剪区域后的高度 cropH = 图片的高度 - e.offsetY(裁剪区域之前的 offsetY) - fh <= 图片的高度 ? 图片的原始高度 cropOldH - 拉伸的距离 fh :
裁剪之前的原始高度 + e.offsetY(裁剪区域之前的 offsetY);
拉伸区域之后的 cropOffsertY = 图片的高度 - e.offsetY(裁剪区域之前的 offsetY) - fh <= 图片的高度 ? e.offsetY(裁剪区域之前的 offsetY) + fh : 0
}
如下图所示:
- if (原始裁剪区域的高度 cropOldH - 拉伸的距离 fh <= 0) {
- // 说明是向下拉伸, 且拉伸的距离 fh 大于或等于原始裁剪区域的高度 cropOldH
同时一样也要判断两种情况, 第一种是向下拉伸后, 没有超过图片的最低端, 第二种是超过了图片的最低端, 也就是越界的情况.
拉伸后裁剪区域的高度 = 拉伸后的总距离 fh + 拉伸前的 offsetY <= 图片的高度 h ? 拉伸后的总距离 fh - 裁剪区域原始的高度 cropOldH : 图片的高度 H -
拉伸前的 offsetY - 裁剪区域原始的高度 cropOldH;
拉伸区域之后的 cropOffsetY = 拉伸前的 offsetY + 裁剪区域原始的高度 cropOldH;
}
如下图所示:
changeCropTypeY === 2 的情况
等于 2, 说明是裁剪区域下边的线或下边线上的点了.
- if (原裁剪区域的高度 + 被拉伸的距离 fh> 0) {
- // 说明了有可能是向下拉伸, 或向上拉伸, 但是向上拉伸的距离小于原裁剪区域的高度
裁剪区域后的高度 = 原裁剪区域的高度 + 被拉伸的距离 fh + 原始裁剪区域的 offsetY <= 图片的高度 ? 原裁剪区域的高度 + 被拉伸的距离 fh : 图片的高度 -
原始裁剪的 offsetY
裁剪后的 cropOffsertY = 原始裁剪的 offsetY;
}
如下图所示:
- if (原裁剪区域的高度 + 被拉伸的距离 fh <= 0) {
- // 说明是向上拉伸, 且向上拉伸的距离大于或等于原始裁剪区域的高度
裁剪区域后的高度 = 图片的高度 - 原裁剪区域的 offsetY + Math.abs(fh + 原裁剪区域的高度) <= 图片的高度 ? 原裁剪区域的高度 + 被拉伸的总距离 fh :
原裁剪区域的 offsetY;
裁剪后的 offsetY = 图片的高度 - 原裁剪区域的 offsetY + Math.abs(fh + 原裁剪区域的高度) <= 图片的高度 ? 原裁剪区域的 offsetY - Math.abs(被拉伸的总距 离 fh + 原裁剪区域的高度) : 0;
}
如下图所示:
6-3: 向左或向右拉伸且是固定比例拉伸, 假设固定比例 3:4, 即 fixedNumber = [3, 4];
向左或向右拉伸, 高度会随着变化. 如下图所示:
if (canChangeX && fixed) {
比如宽和高比是 3:4 这样的比例; fixedNumber = [3, 4]
因此 固定比例高度的计算
裁剪区域的高度 fixedNumber[1]
------------- = ---------------
裁剪区域的宽度 fixedNumber[0]
因此:
var 裁剪区域的高度(fixedHeight) = ~~(裁剪区域的宽度 / fixedNumber[0] * fixedNumber[1]);
- if (裁剪区域的高度 + 原裁剪区域的 offsetY> 图片的高度) {
- // 说明向左拉伸或向右拉伸, 导致纵向区域越界了,
拉伸后的高度 = 图片的高度 - 原裁剪区域的 offsetY;
拉伸后的宽度 3
---------- = ----
拉伸后的高度 4
拉伸后的宽度 = 拉伸后的高度 / fixedNumber[1] * fixedNumber[0];
} else {
拉伸后的高度 = fixedHeight;
}
}
同样的道理, 如果 Y 轴上的上下线拉伸的话, 宽度会跟着变化, 也是一样的计算方式:
if (this.canChangeY && this.fixed) {
比如宽和高比是 3:4 这样的比例; fixedNumber = [3, 4];
因此 固定比例宽度的计算
裁剪区域的高度 fixedNumber[1]
------------- = ---------------
裁剪区域的宽度 fixedNumber[0]
裁剪区域的宽度(fixedWidth) = ~~(裁剪区域的高度 / fixedNumber[1] * fixedNumber[0]);
- if (裁剪区域的宽度 + 原裁剪区域的 offsetX> 图片的宽度) {
- // 说明向上或向下拉伸, 横向区域越界了
拉伸后的宽度 = 图片的宽度 - 原裁剪区的 offsetX;
拉伸后的宽度 3
---------- = ----
拉伸后的高度 4
拉伸后的高度 = 拉伸后的宽度 / fixedNumber[0] * fixedNumber[1];
} else {
拉伸后的宽度 = fixedWidth;
}
}
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);
如下图所示:
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
- if (h> this.h) {
- h = this.h
- w = h / this.fixedNumber[1] * this.fixedNumber[0]
- }
自动截图的主要代码如下:
- var w = this.autoCropWidth
- var h = this.autoCropHeight
- if (w === 0 || h === 0) {
- w = this.w * 0.8
- h = this.h * 0.8
- }
- w = w> this.w ? this.w : w
- h = h> this.h ? this.h : h
- if (this.fixed) {
- h = w / this.fixedNumber[0] * this.fixedNumber[1]
- }
- // 如果比例之后 高度大于 h
- if (h> this.h) {
- h = this.h
- w = h / this.fixedNumber[1] * this.fixedNumber[0]
- }
github 的源码 --PC 端 https://github.com/tugenhua0707/vue-cropper-demo
来源: https://www.cnblogs.com/tugenhua0707/p/8859291.html