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 (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]
}
总结
以上所述是小编给大家介绍的vue-cropper 图片裁剪的基本原理及思路讲解，希望对大家有所帮助