How we can do same operations (Scale & Rotation) on image in php which applied on canvas using fabric Js?

Question

I have added one image (resized image) to canvas & applied scale and rotation operation on it. Canvas Width is 380px And Height is 217.143px .

Case 1). Json after Applied only Scaling:

[{"objects":[{"type":"image","originX":"left","originY":"top","left":-39,"top":-62.76,"width":1000,"height":667,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.83,"scaleY":0.83,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"http:\/\/127.0.0.1\/greatcanvasprints\/web\/media\/designtool\/canvasprints\/single-print\/1813\/small_=_=_=26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_","filters":[],"resizeFilters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":null}]

Case 2). Json after Applied Scaling & Rotation :

[{"objects":[{"type":"image","originX":"left","originY":"top","left":278.28,"top":-275.14,"width":1000,"height":667,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.83,"scaleY":0.83,"angle":45,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"http:\/\/127.0.0.1\/greatcanvasprints\/web\/media\/designtool\/canvasprints\/single-print\/1813\/small_=_=_=26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_","filters":[],"resizeFilters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":null}]

I want to do same operations on original image in PHP And I need only designed area (canvas area). Below is some code in PHP:

Php Code workng fine with first case : while applied only scaling

get Original File
$originalImg = imagecreatefromjpeg('26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_');

Here is width and height (pixels) of resized image which used in canvas 

$inToolUsedFileWidth = 1000;
$inToolUsedFileHeight = 667;

here is width & height (pixels) of Original File

$originalFileWidth = 5760;
$originalFileHeight = 3840;

$scaleX = 0.83 
$scaleY = 0.83 

$ratioWidth = ($originalFileWidth/$inToolUsedFileWidth) * (1 / $scaleX);   
$ratioHeight = ($originalFileHeight/$inToolUsedFileHeight) * (1 / $scaleY);  

380 default canvas width

$canvasWidth = 380 * $ratioWidth; 

217.143 default canvas height

$canvasHeight = 217.143 * $ratioHeight; 

same As first json value

$left = -39; 
$top = -62.76; 

$croppArr = array('x' => (abs($left) * $ratioWidth),'y' => (abs($top) * $ratioHeight),'width' => $canvasWidth,'height' => $canvasHeight);


$croppedImg = $this->imageCrop($originalImg,$croppArr);  

Working Fine with Only Scaling

Case 2: after applied Rotation

But while applied Rotation, I have just rotate original image. But does not get exact design portion which designed on canvas.

$originalImg = imagecreatefromjpeg('26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_');

// Same as second Json angle value

$antiRotation = (float) -(45); // here anti clockwise rotation in php so prepend nagetive value 
$originalImg = imagerotate($originalImg,$antiRotation,0);

Then use above code & just changed left & top values as per second json.

Didn't get exact output which designed on canvas.

I want to know how we recalculate left & top position of object after rotation in Fabric Js.

In First Case : Left = -39 , Top = -62.76 And Angle = 0

In Second case : Left = 278.28 , Top = -275.14 And Angle = 45

which logic applied on left & top position, after rotation.

I want to do same with PHP.

Not able to attachment of original image due to high size.

Image 1 Image 2

Answer 1

I have no idea what php side tool are you using. You should just read the math of the transform pipeline in fabricjs and replicate it.

1) set fabric to originX, originY 'center', 'center'. This will simplify the logic.

2) once done that top,left of image will be the exact center

3) in php move to center (top, left)

4) rotate the canvas

5) scale the of the right amount

6) draw the image at -width/2, -height/2

Or if your php tool allows the use of transform matrix, replicate the fabricjs method object.calcTransformMatrix apply the result to your canvas, draw the image at at -width/2, -height/2.