2

使用div具有静态尺寸的框时，我加载了尺寸大于或小于 的图像，div因此我可以在其中旋转、更改大小和移动图像div。

我通过 css 3 来实现旋转功能，jquery ui 来实现移动功能。

在与图像交互时，我想生成具有新位置、角度和大小的图像。因此，我将图像的位置、旋转角度和新尺寸发送到服务器。在服务器上，我生成了一个宽度和高度为div. 问题是当我有一个更大的图像并且我改变他的位置时，我无法在服务器上生成相同的图像。

这是我生成具有div盒子大小和宽度（670/465）的新图像的算法：

$imgFace = WideImage::load($src);
$newImage = $imgFace->resize($width, $height)->rotate($angle); // resize the image and rotate to $angle
$rotW = $newImage->getWidth();
$rotH = $newImage->getHeight();
$dx = $rotW - $width;
$dy = $rotH - $height;   
if($width < 670 && $height < 465) // if the image is smaller than the div box
{
   $newImage->copyTo($img, $left, $top); // left and top are values from css after I move the image
} else { // if is larger
   $crop_x = $dx/2 + $left;
   $crop_y = $dy/2 + $top;
   $newImageCroped = $newImage->crop($crop_x, $crop_y,670,465);
   $newImageCroped->copyTo($img, $leftB, $topB);
}

简而言之，我在以下场景中遇到了问题：

  • 当图像高于div框并且我移动它时（只有一部分在 中div）
  • 当图像被旋转并且他只有其中的一部分时div。
4

0 回答 0