I am creating a Croppie implementation as an AngularJS directive to provide a user interface for cropping their profile images.
My backend is PHP, and I need the UI selection reflected in server-side processing.
I have 150 x 150 squares in the center of my image, as shown in a similar Croppie example. However, as you can see, you can move and scale the image around, which means that cropping from the center in Imagick will not always work depending on how the user positions his image around the center point.
I know I can scale the image and then crop it from the center in Imagick, but how to explain that the image will also be translated?
When I move the image in my implementation, I get the following data points for parsing and sending to the server:
{transform: "translate3d(-60px, -121px, 0px) scale(1)"}
This shows, for example, that the image is offset along the X and Y axis and does not scale. How to move the center of the image accordingly in Imagick?
Thank!
EDIT:
I see these commands: Imagick :: cropThumbnailImage and Imagick :: cropImage is there some way to combine them when the cropped area remains in the center as the image scales and the image can be shifted along the x or y axis?
EDIT 2
Well, I realized that I need to use a combination of Imagick :: cropImage and Imagick :: scaleImage , but I cannot figure out the correct math to send to the server.
, , , , :

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
, .viewBox
max-width: 100%;
width
, 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
-like, , . , () , CSS.
PHP, . , . , .
$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
. , , .
(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);
, .
- , ?