我正在构建一个Croppie的实现，作为angularjs指令，为用户提供一个ui来裁剪他们的配置文件图像。
我的后端是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>

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

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

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

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

最佳答案

这是css和js的棘手部分。
标记HTML：

<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;

关于php - Php Imagick来自可变中心点的裁剪图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46775277/