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)

因此页面布局变成如下：

rush:js;"> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

Box">

Box-canvas" style="width:644px;height:642px;transform: scale(0.778816,0.778816) translate3d(453.252px,-87.312px,0px) rotateZ(0deg)">

Box cropper-crop">