我正在构建一个 Croppie的实现作为AngularJS指令,为用户提供用于裁剪其配置文件图像的UI.

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

我的图像中心有150 x 150平方,因为链接的Croppie示例同样显示.然而,正如您所看到的,您可以移动和缩放图像,这意味着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.

我使用以下内容来计算相对于图像比例(.bigTuna)的图像偏移(我可以在.encloseCrop.small周围拖动). .encloseCrop.small的偏移量为.viewBox,图像占用整个.viewBox,最大宽度为100％;

因为图像有宽度,naturalWidth和getBoundingClientRect().width(以及高度的相应属性),我不确定如何实现这一点,我可以向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的指令所在的模态中看到的图像已经缩放,因为它不是自然尺寸.最重要的是,我正在使用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 x 150圆(.enclosedCrop)的偏移量：

在高度的情况下,这看起来像这样：

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

等式摘录的第一部分得到offsetTop,它将保持不变,因为.enclosedCrop本身在容器的中心是静止的. $scope.matrixobject.y是容器周围图像的变换,通过反转它,我们可以获得所需的变换,而不是.enclosedCrop在图像周围移动.通过将其添加到偏移量,我们知道图像上的裁剪发生在哪里.

但是,偏移和变换是相对于容器中图像的大小(最大宽度：100％),这意味着它们需要缩放以反映图像的自然大小以及使用CSS可能发生的任何变换规模财产.

所以我将偏移乘以：

* (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);

然而,它总是关闭几个像素,通常略微向下和向右.

有人可以解释这个等式,以便我可以更好地编辑它并发现错误吗？

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

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

.enclosedCrop.small {
  position: absolute;
}

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