Php从可变中心点剪切图像

Question

我正在构建一个克罗皮的实现，作为一个AngularJS指令，为用户提供一个用户界面来裁剪他们的配置文件图像。

我的后端是PHP，我需要一种在服务器端操作中反映UI选择的方法。

我有一个150乘150平方，在我的图像中心，如链接的克罗皮例子类似地显示。然而，正如您所看到的，您可以移动和缩放图像，这意味着在Imagick中从中心裁剪并不总是工作，这取决于用户如何将他们的图像定位在中心点。

我知道我可以缩放图像，然后从Imagick的中心进行裁剪，但是如何解释图像也会被翻译呢？

当我在实现中移动图像时，我得到以下数据点以进行解析并发送到服务器：

{transform: "translate3d(-60px, -121px, 0px) scale(1)"}

这表明，例如，图像已沿X和Y轴移动，而没有缩放。如何在Imagick中相应地移动图像的中心？

谢谢!

编辑：

我看到了以下命令：Imagick::cropThumbnailImage和Imagick::cropImage是否有某种方式将它们组合在一起，当图像被缩放，图像可以在x或y轴上移动时，裁剪区域保持在中心位置吗？

编辑2

嗯，我知道我需要使用Imagick::cropImage和Imagick::scaleImage的组合，但我无法计算出发送到服务器的正确数学。

我附加了一个图像，这样你就可以看到我的意思了，我变得非常接近，但是有些图像上的片段是不存在的：

​

​

我的HTML是这样的：

<div class="viewBox">
<img class="bigTuna">
<div class="enclosedCrop small"></div>
<div class="overlay small"></div>
</div>

您正在看到的图像，我想使用.encloseCrop.small (圆圈)进行裁剪，它是.bigTuna。

我使用下面的方法来计算图像的偏移量(我可以在.encloseCrop.small周围拖动)相对于图像的比例(.bigTuna)。.encloseCrop.small的偏移量是.viewBox，图像用max-width: 100%;占据整个.viewBox

因为映像有一个width、naturalWidth和getBoundingClientRect().width (heigh_t各自的属性)，所以我不知道如何实现这一点，在这里我可以向Imagick发送一个X和Y，以获取cropImage()参数。

这是我得到的最接近的：

var Xvalue = (angular.element(".enclosedCrop")[0].offsetLeft + ( -1 * $scope.matrixobject.x )) * ((angular.element('.bigTuna')[0].getBoundingClientRect().width/angular.element('.bigTuna')[0].width)*(angular.element('.bigTuna')[0].naturalWidth/angular.element('.bigTuna')[0].width));
var Yvalue = (angular.element(".enclosedCrop")[0].offsetTop + ( -1 * $scope.matrixobject.y ))  * ((angular.element('.bigTuna')[0].getBoundingClientRect().height/angular.element('.bigTuna')[0].height)*(angular.element('.bigTuna')[0].naturalHeight/angular.element('.bigTuna')[0].height));

边界宽度除以宽度是比例因子，但我也需要考虑自然宽度，我相信。问题是，您在Croppie-like指令所在的模型中看到的图像已经缩放，因为它不是自然维度。最重要的是，我正在使用CSS转换再次缩放这个(已经)缩放的图像。

但是当我将图像发送到PHP时，它并不知道这一点。我只是接受自然维度，并想知道如何裁剪它。我需要那个片段来反映UI的效果。

$scope.matrixobject.x是图像转换的值，在这种情况下，它被翻译出的像素数量。我可以很好地得到所有这些值，我只是不知道哪个方程实际上是正确的，利用这些值。

编辑3:

我已经这样完善了我的方程式，但是这个方程式，虽然对我来说最有意义，却让我完全失去了庄稼。

var Xvalue = (angular.element(".enclosedCrop")[0].offsetLeft + ( -1 * $scope.matrixobject.x )) * (angular.element('.bigTuna')[0].naturalWidth/angular.element('.bigTuna')[0].getBoundingClientRect().width);
var Yvalue = (angular.element(".enclosedCrop")[0].offsetTop + ( -1 * $scope.matrixobject.y ))  * (angular.element('.bigTuna')[0].naturalHeight/angular.element('.bigTuna')[0].getBoundingClientRect().height);

该方程首先尝试从图像容器的顶部和左侧获取150个圆()的偏移量 (.enclosedCrop)：

就高度而言，这看起来是这样的：

angular.element(".enclosedCrop")[0].offsetTop + ( -1 * $scope.matrixobject.y )

这个方程摘录的第一部分得到了offsetTop，它将保持不变，因为.enclosedCrop本身是固定在容器的中心。$scope.matrixobject.y是容器周围图像的转换，通过逆变换，如果.enclosedCrop在图像周围移动，我们就可以得到所需的转换。通过将此添加到偏移量中，我们可以知道图像上的裁剪发生在何处。

然而，偏移量和转换相对于容器(max-width:100%)中图像的大小，这意味着它们需要缩放来反映图像的自然大小以及使用CSS scale属性可能发生的任何转换。

因此，我将抵消额乘以：

* (angular.element('.bigTuna')[0].naturalHeight/angular.element('.bigTuna')[0].getBoundingClientRect().height);

自然高度除以图像的高度。重要的是，这个“图像的高度”是从getBoundingClientRect()派生出来的，这意味着它考虑了CSS的缩放。

我的逻辑怎么了？我在图像上到处都是庄稼，而不是我指定的坐标。

编辑4:

给出以下公式，我得到了非常接近的结果，但我并不真正理解(从Croppie的源代码中获得)

var Xvalue = angular.element(".enclosedCrop")[0].getBoundingClientRect().left - angular.element(".bigTuna")[0].getBoundingClientRect().left + angular.element(".enclosedCrop")[0].offsetWidth + (angular.element(".enclosedCrop")[0].getBoundingClientRect().width - angular.element(".enclosedCrop")[0].offsetWidth) / 2;
var Yvalue = angular.element(".enclosedCrop")[0].getBoundingClientRect().top - angular.element(".bigTuna")[0].getBoundingClientRect().top + angular.element(".enclosedCrop")[0].offsetHeight + (angular.element(".enclosedCrop")[0].getBoundingClientRect().height - angular.element(".enclosedCrop")[0].offsetHeight) / 2;
Xvalue = parseFloat(Xvalue).toFixed(0);
Yvalue = parseFloat(Yvalue).toFixed(0);

然而，它总是有几个像素的距离，通常稍微向下，并向右。

有人能解释一下这个方程式吗?这样我就能更好地编辑它，找出错误。

Answer 1

这个棘手的部分由css和js完成。

标记html

<div class="viewBox layer-image">
  <img class="bigTuna">
  <div class="enclosedCrop small"></div>
  <div class="overlay small"></div>
</div>

Css

.layer-image {
  background-image: url('sample/image.png');
  position: relative;
  height: 800px; /* actual height sample*/
  weight: 800px; /* actual weight sample*/
}

.enclosedCrop.small {
  position: absolute;
}

我们设置了类层-图像，以背景图像和位置作为相对。你知道基座绝对位置是相对的。

Javascript

对于拖动，大小大小您可以使用您喜欢的库或使用自己的代码。最大的问题是如何得到x和y。如果你看到代码，我们已经知道如何得到x y。想象一下，x y从左上角开始。所以你只需要从图层图像中得到.enclosedCrop.small顶部的边距和.enclosedCrop.small的左边边距。前任：

var offsetLayerBase = $('.enclosedCrop.small').offset();
var offsetCropping = $('.enclosedCrop.small').offset();
var yPositionCrop = offsetCropping.top - offsetLayerBase.top;
var xPositionCrop = offsetCropping.left - offsetLayerBase.left;

从窗口将offsetLayerBase设置为基(如果有css自定义，则需要任何自定义)。

如果为你工作，请告诉我。(欢呼声;)