Comment on peut faire les mêmes opérations (Scale & Rotation) sur une image en php qui a été appliquée sur du canvas en utilisant du tissu Js?

Question

J'ai ajouté une image (image redimensionnée) à la toile & échelle appliquée et l'opération de rotation sur elle. La largeur de la toile est 380px et la hauteur est 217.143px.

Cas 1). Json après Appliqué uniquement Mise à l'échelle:

[{"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}] 

Cas 2). JSON après mise à l'échelle appliquée & 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}] 

Je veux faire mêmes opérations sur l'image originale en PHP et j'ai besoin espace conçu uniquement (zone de toile). Ci-dessous un code en PHP:

code Php workng bien avec le premier cas: alors appliqué seulement mise à l'échelle

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

fonctionne bien avec seulement Mise à l'échelle

Cas n ° 2: après la rotation appliquée

Mais tout en appliquant la rotation, je viens de faire pivoter l'image originale. Mais n'obtient pas la partie de conception exacte qui a conçu sur la toile.

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

Ensuite, utilisez le code ci-dessus & juste changé gauche & valeurs supérieures comme par seconde JSON.

N'a pas obtenu la sortie exacte qui a conçu sur toile.

Je veux savoir comment nous recalculons gauche & position supérieure de l'objet après rotation dans Fabric Js.

Dans un premier cas: Gauche = -39, Top = -62,76 Et Angle = 0

Dans Second cas: Gauche = 278,28, Haut = -275,14 Et Angle = 45

que la logique appliquée à gauche & position supérieure, après rotation.

Je veux faire la même chose avec PHP.

Impossible de joindre l'image originale en raison de sa taille élevée. J'ai

Image 1 Image 2

Answer 1

aucune idée de ce que l'outil côté php utilisez-vous. Vous devez simplement lire les calculs du pipeline de transformation dans fabricjs et le répliquer.

1) mettre le tissu à l'origine X, origine 'centre', 'centre'. Cela simplifiera la logique.

2) Une fois cela fait que en haut, à gauche de l'image sera le centre exact

3) en mouvement php centre (en haut, à gauche)

4) faire tourner la toile

5) l'échelle de la la bonne quantité

6) dessiner l'image -width/2, -height/2

Ou si votre outil php permet l'utilisation de la matrice de transformation, de reproduire la fabri Méthode cjs object.calcTransformMatrix Appliquez le résultat à votre canevas, dessinez l'image à at -width/2, -height/2.