静的な寸法の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
.