6

次のJavaScriptコードを使用して、jquery imgAreaSelectをインスタンス化して画像をトリミングしています。

$(document).ready(function () {
    $('#ladybug').imgAreaSelect({
        onSelectEnd: function (img, selection) {
            $('input[name="x1"]').val(selection.x1);
            $('input[name="y1"]').val(selection.y1);
            $('input[name="x2"]').val(selection.x2);
            $('input[name="y2"]').val(selection.y2);            
        }
    });
});

これは、次の (例) html コードに関連しています。

<div>
    <img id="ladybug" src="ladybug.jpg" alt="" />
</div>

<div>
   <form action="#" method="post">
      <input id="x1" type="hidden" name="x1" value="" />
      <input id="y1" type="hidden" name="y1" value="" />
      <input id="x2" type="hidden" name="x2" value="" />
      <input id="y2" type="hidden" name="y2" value="" />
      <input type="submit" name="submit" value="Submit" />
   </form>
</div>

例 imgAreaSelect

これは完全に機能します。フォームを送信すると、正しい情報がすべて PHP に返されます。ただし、フォームが送信したばかりの座標で画像を変更するには、php を使用する必要があります。そして、これは私が思っていたよりも大変でした。

$image_info = getimagesize($filename);
$image = imagecreatefromjpeg($filename);

$width = imagesx($image);
$height = imagesy($image);

$resized_width = ((int)$formData["x2"]) - ((int)$formData["x1"]);
$resized_height = ((int)$formData["y2"]) - ((int)$formData["y1"]);

$resized_image = imagecreatetruecolor($resized_width, $resized_height);
imagecopyresampled($resized_image, $image, 0, 0, (int)$formData["x1"], (int)$formData["y1"], $resized_width , $resized_height, $width, $height);
imagejpeg($resized_image, $filename);

上記のスクリプトは機能しますが、座標/幅/高さを間違った方法で使用しています。サイズ変更された画像には常に大きな黒い境界線が残っています:

間違ったトリミングされた画像の例

誰かが私を正しい方向に向けることができますか?

4

1 に答える 1

6

次で始まる行を置き換えるimagecopyresampledと、次のようになります。

imagecopyresampled($resized_image, $image, 0, 0, (int)$formData["x1"], (int)$formData["y1"], $width, $height, $width, $height);

imagecopyresampled()は、幅 src_w、高さ src_h の src_image から位置 (src_x,src_y) にある矩形領域を取得し、位置 (dst_x,dst_y) にある幅 dst_w、高さ dst_h の dst_image の矩形領域に配置します。

于 2013-08-22T11:56:11.850 に答える