Detailed explanation of the steps for cropping images with Vue-cropper

This time I will bring you a detailed explanation of the steps for cropping images with Vue-cropper. What are the precautions for cropping images with Vue-cropper? Here are practical cases, let’s take a look.

1: Ideas for cropping:

1-1. Cropping area: If you need to crop, you first need to form a cropping area and the size of the cropping area. It is related to the distance our mouse moves. How far the mouse moves, the size of the cropping area will be. As shown below:

1-2 Calculation of the width and height of the cropping area:

As shown above, the horizontal and vertical movement distance of the mouse are formed The width and height of the cropping area. Then the calculation of the width and height of the cropping area is: when we click the mouse, we can get the mouse click position through the event event

Object, e.clientX and e.clientY; when When the mouse moves, the mouse position can also be obtained through the event. By changing the mouse position twice, the

mouse distance can be obtained. That is: the initial x-axis position is initX = e.clientX, initY = e.clientY;

The position moved to a certain point is: endX = e.clientX, endY = e.clientY;

So the width of the cropping area Tx = endX - initX;

The height of the cropping area is Ty = endY - initY;

1-3 Formation of the shadow area

The parts of the image we crop, except for the cropped area, are all shaded parts. As shown in the figure below:

#So how to calculate the shadow area? For example, the width of the left shadow = the left offset value of the cropping area - the left offset value of the image itself; then the upper shadow height = the upper offset value of the cropping area - the upper offset value of the image, as shown in the following figure:

Then the height of the lower shadow = the height of the picture itself - the height of the upper shadow - the height of the cropping area; then the width of the right shadow = the width of the picture - the width of the left shadow - cropping The width of the area.

1-4 Understand that the cropping area is out of bounds

There will be out-of-bounds situations during the process of cropping pictures, so the out-of-bounds situations need to be divided into two situations. The first one is: out-of-bounds situations during the cropping process. , the second is to move the cropping area out of bounds.

1-4-1 Cross-border during cropping

What is cross-border during cropping? That is, when we use the mouse to drag the area to crop beyond the width and height of the picture, an out of bounds is formed; as shown in the following figure:

For this kind of out of bounds, it is necessary to judge whether to be cropped The position of the right side of the area relative to the left side of the browser cannot exceed the position of the right side of the image relative to the left side of the browser;

and the bottom of the cropped area cannot exceed the position relative to the top of the browser The position of the bottom of the image relative to the top of the browser is as shown below:

##1-4-2 Mobile out-of-bounds

Moving out-of-bounds finger has been formed The area is cropped, but when we can crop the area with the mouse, it goes out of bounds. In fact, the judgment principle is the same as the principle of cutting out of bounds.

2. How to compress images?

When the width of the image is greater than the width of the container, compression needs to be performed; therefore var scale = width of the container/width of the image;

If the height of the image * scaling ratio> The height of the container, then the scaling ratio scale = the height of the container/the height of the image; otherwise, no compression will be performed.

2-1: Calculation method for the X-axis and Y-axis movement positions in translate3d after compression:

x = width of the container/compression ratio

y = container Height/compression ratio

That is: transform: translate3d(x, y, z) -> translate3d(width of container/compression ratio 'px', height of container/compression ratio 'px', 0)

ThereforePage layoutbecomes as follows:

<!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>
 <p id="app" style="height:500px;margin: 0 auto;">
 <p class="vue-cropper">
 <p class="cropper-box">
 <p 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" />
 </p>
 </p>
 <p class="cropper-drag-box cropper-crop"></p>
 </p>
 </p>
</body>
</html>

4. During the cutting process, how to calculate the cutting width and height?

When we click the mouse, we can get the mouse click position through the event event object, e.clientX and e.clientY; when the mouse moves, we can also get the mouse position through the event,

By changing the mouse position twice, you can get the distance of the mouse movement. That is:

The initial x-axis and Y-axis positions are cropX = e.clientX, cropY = e.clientY respectively;

The current X-axis and Y-axis positions after the move are: nowX = e.clientX, nowY = e.clientY;

Therefore the temporary value of the crop area var fw = ~~(nowX - cropX);

The temporary value of the crop area is fh = ~ ~(nowY - cropY);

When cropping a picture, you may drag to the right (the value will become larger and larger), or you may drag in the opposite direction (to the left) (the value will become larger and larger) (the smaller), the same principle applies to dragging up or down. Therefore, it is necessary to judge whether fw and fh are greater than 0; when the mouse button is pressed, first obtain the X and Y axis coordinates of the mouse relative to the event source element, e.offsetX and e.offsetY;

Therefore cropChangeX = e.offsetX; cropChangeY = e.offsetY;

The understanding of offsetX and offsetY is as follows;

if (fw > 0) {
var cropW(裁剪区域的实际宽度) = cropChangeX + fw > w(图片的实际宽度) ? w - cropChangeX : fw;
cropOffsertX = cropChangeX;
}

cropOffsertX is to save The distance of the event source relative to the element.

If fw is less than 0, it means cropping to the left, then the cropping distance fw = (clientX at the end of the event - clientX at the beginning of the event);

If (actual width of image - e.offsetX) Math.abs(fw) > actual width of image? this.cropChangeX : Math.abs(fw);

That is:

if (fw < 0) {
var cropW(裁剪区域的实际宽度) = (w - cropChangeX) + Math.abs(fw) > w ? cropChangeX : Math.abs(fw);
cropOffsertX = cropChangeX + fw > 0 ? cropChangeX + fw : 0;
}

It means that the maximum width of cropping to the left can only be e.offsetX; it cannot exceed this value, otherwise it will be out of bounds.

At this time, the cropOffsertX offset value has changed; cropOffsertX = cropChangeX fw > 0 ? cropChangeX fw : 0; As shown in the figure below:

The above analysis is about cropping with a fixed ratio of width and height. Next, let’s look at cropping with a fixed ratio of width and height.

5. Fixed width and height cropping calculation;

For example, a screenshot where the width and height ratio is 3:4; fixedNumber = [3, 4]

So the calculation of the fixed proportion height

fixedHeight is the actual width of the cropping area

------------- = -------- -------

fixedNumber[1] fixedNumber[0]

Therefore:

var fixedHeight = ~~(裁剪区域的实际宽度 / fixedNumber[0] * fixedNumber[1]);

If the fixed proportion of the moving height Y If the offset value on the axis relative to the image is greater than the height of the image, then the height of the cropping area (cropH) = the height of the image (h) - the offset value on the Y axis relative to the image (cropOffsertY); as shown in the figure below Display:

If you get the height of the cropping area, you can get the width of the cropping area; the calculation method is:

cropW(裁剪区域的宽度) = ~~(cropH / fixedNumber[1] * fixedNumber[0]);

Also judge Whether fw is greater than 0, calculate the value of cropOffsertX;

if (fw > 0) {
var cropOffsertX = cropChangeX
} else {
var cropOffsertX = cropChangeX - cropW
}

fw > 0 means moving to the right, so cropOffsertX = cropChangeX;

fw < 0 means moving to the left, cropOffsertX = initial e.offsetX - the width of the cropping area

That is:

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;
}</p>
<p style="text-align: left;"><strong>6. Understand the stretching principle of the cropping area</strong></p>
<p style="text-align: left;">Control the stretching of the cropping area There are 12 kinds of stretching points. There are four lines in the cutting area that can be stretched, and there are eight points on the four lines that can be stretched; as shown in the figure below: </p>
<p style="text-align: left;"><img alt="" src="https://img.php.cn/upload/article/000/061/021/39c8517acc9e35c3627635642892a5ca-9.jpg"></p>
<p style="text-align: left;">When the mouse clicks to stretch, the mousedown event will be triggered; therefore, it is necessary to distinguish which line or point is stretched in which direction. Therefore define two variables canChangeX and canChangeY, </p>
<p style="text-align: left;">判断是否能改变X轴和Y轴；默认是false；同时定义两个变量为 changeCropTypeX 和 changeCropTypeY，含义是能否改变x轴或Y轴的基准点。默认为1；可以改变。</p>
<p style="text-align: left;">1. 裁剪区域的最上面的线； 可以上下拉伸, 不能左右拉伸；</p>
<p style="text-align: left;">因此可以约定： canChangeX = false, canChangeY = true; changeCropTypeX = 0; changeCropTypeY = 1;</p>
<p style="text-align: left;">2. 裁剪区域左边的线；可以左右拉伸，不能上下拉伸；</p>
<p style="text-align: left;">因此可以约定：canChangeX = true, canChangeY = false; changeCropTypeX = 1; changeCropTypeY = 0;</p>
<p style="text-align: left;">3. 裁剪区域底部线; 可以上下拉伸，不能左右拉伸；</p>
<p style="text-align: left;">因此可以约定：canChangeX = false; canChangeY = true; changeCropTypeX = 0; changeCropTypeY = 2;(为了区分上面的线，因此等于2)；</p>
<p style="text-align: left;">4. 裁剪区域右边线；可以左右拉伸，不能上下拉伸；</p>
<p style="text-align: left;">因此可以约定：canChangeX = true; canChangeY = false; changeCropTypeX = 2;（为了区分左边的线） changeCropTypeY = 0;</p>
<p style="text-align: left;">5. 左上角的点；可以向上或向左移动；</p>
<p style="text-align: left;">因此 canChangeX = true, canChangeY = true; changeCropTypeX = 1; changeCropTypeY = 1;</p>
<p style="text-align: left;">6. 上面中间的点，只能上下拉伸，不能左右拉伸；</p>
<p style="text-align: left;">因此 canChangeX = false, canChangeY = true; changeCropTypeX = 0; changeCropTypeY = 1;</p>
<p style="text-align: left;">7. 右上角的点，可以左右拉伸和上下拉伸；</p>
<p style="text-align: left;">因此 canChangeX = true, canChangeY = true; changeCropTypeX = 2; changeCropTypeY = 1;</p>
<p style="text-align: left;">8. 左中角的点，只能左右拉伸，不能上下拉伸；</p>
<p style="text-align: left;">因此 canChangeX = true, canChangeY = false; changeCropTypeX = 1; changeCropTypeY = 0;</p>
<p style="text-align: left;">9. 右中角的点，只能左右拉伸，不能上下拉伸；</p>
<p style="text-align: left;">因此 canChangeX = true, canChangeY = false; changeCropTypeX = 2; changeCropTypeY = 0;</p>
<p style="text-align: left;">10. 左下角的点，可以向上或向左移动；</p>
<p style="text-align: left;">因此 canChangeX = true, canChangeY = true; changeCropTypeX = 1; changeCropTypeY = 2;</p>
<p style="text-align: left;">11. 下线中间的店，可以上下拉伸，不能左右拉伸；</p>
<p style="text-align: left;">因此 canChangeX = false, canChangeY = true; changeCropTypeX = 0; changeCropTypeY = 2;</p>
<p style="text-align: left;">12. 下右角点，可以上下拉伸，左右拉伸；</p>
<p style="text-align: left;">因此 canChangeX = true, canChangeY = true; changeCropTypeX = 2; changeCropTypeY = 2;</p>
<p style="text-align: left;">下面来看看移动操作；</p>
<pre class="brush:php;toolbar:false">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]
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

VUE对ElTableColumn进行扩展

在Vue中watch方法使用详解

The above is the detailed content of Detailed explanation of the steps for cropping images with Vue-cropper. For more information, please follow other related articles on the PHP Chinese website!