我们如何在 php 中使用织物 Js 对画布上的图像执行相同的操作（缩放和旋转）？

Posted 2023-03-25

技术标签:

【中文标题】我们如何在 php 中使用织物 Js 对画布上的图像执行相同的操作（缩放和旋转）？【英文标题】：How we can do same operations (Scale & Rotation) on image in php which applied on canvas using fabric Js? 【发布时间】：2017-12-14 06:08:58 【问题描述】：

我在画布上添加了一张图像（调整大小的图像）并对其应用了缩放和旋转操作。画布宽度为 380 像素，高度为 217.143 像素。

案例 1)。仅应用缩放后的 Json：

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

案例 2)。应用缩放和旋转后的 Json：

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

我想在 php 中对原始图像进行相同的操作，我只需要设计区域（画布区域）。以下是PHP中的一些代码：

PHP 代码在第一种情况下工作正常：仅应用缩放

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

仅缩放即可正常工作

案例2：应用旋转后

但在应用旋转时，我只是旋转了原始图像。但没有得到在画布上设计的确切设计部分。

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

然后使用上面的代码 & 只是根据每秒 json 更改 left 和 top 值。

没有得到在画布上设计的准确输出。

我想知道我们如何在 Fabric Js 中旋转后重新计算对象的左上角位置。

在第一种情况下：左 = -39，上 = -62.76 和角度 = 0

在第二种情况下：Left = 278.28，Top = -275.14 And Angle = 45

在旋转后，哪个逻辑应用于左侧和顶部位置。

我想对 PHP 做同样的事情。

由于尺寸太大，无法附加原始图像。

Image 1 Image 2

【问题讨论】：

说实话，你的“问题”是一团糟。试图格式化它，但不能做太多。你真的应该多花几分钟来考虑一下如何首先描述你的问题。 【参考方案1】：

我不知道您使用的是什么 php 端工具。您应该只阅读 fabricjs 中转换管道的数学并复制它。