簡単!PHPとjQueryでドラックすればリサイズクリップ出来るスクリプト
2009年03月09日 公開

なかなか凄いぞ!
jQueryとPHPのモジュールで簡単に動いてしまった。
画像をアップロードして、カットしたいところをドラッグ。
その部分が指定したサイズになってクリップされるという代物。
因みに今回アップロードで使用した画像は美人時計さんのもので、1分おきに美人が現れる時計式ウェブサイトです。これも同時にお勧め。
仕様
必要なものは、PHP4もしくはPHP5。
そしてPHP GD ライブラリがサーバーにインストールされている必要がある。
逆に言えばこれだけクリアしていればものすごく手軽に設置できるという魅力あるスクリプトです。
仕様としては、アップローダーが付いており、そこに画像をアップすると、編集モードになる。
そこで、写真の好きなところをドラックして囲い込みをすればそこが画像としてリサイズできるのです。

ダウンロードは以下

ページ下部にある以下のリンクから。

ダウンロードした後は
展開すると一つだけフォルダが足りない。
それを追加してあげる必要がある。
ダウンロードしたPHPを開けば書いてありますが、上部の以下を修正。
実際は補足事項が英語なので自分で確かめたい方はダウンロードしてご確認を。
たったこれだけ。手軽にアップロード+リサイズ+クリップが可能となる。//アップロード先フォルダ。同じ階層にこのフォルダをつくり、パーミッション777かサーバーによっては707あたりにしてあげればOK
$upload_dir = "upload_pic";
//アップロードする先の階層の指定。phpと同じ階層にフォルダを作るなら変更する必要は無い
$upload_path = $upload_dir."/";
//アップロードした画像の名前に付与する名称
$large_image_prefix = "resize_";
//クリップされた画像の名前に付与する名称
$thumb_image_prefix = "thumbnail_";
$large_image_name = $large_image_prefix.$_SESSION['random_key'];
$thumb_image_name = $thumb_image_prefix.$_SESSION['random_key'];
$max_file = "3";
//大きな画像をアップした際、横幅を500ピクセル以内に縮小するという意味
$max_width = "500";
//クリップするサイズ。デフォルトが100*100となっている
$thumb_width = "100";//横幅
$thumb_height = "100";//縦幅
ちなみにリサイズ後のサイズをデフォルト100x100に変更を加え、250x120にすると簡単にリサイズ後のサイズも決定できる。

この部分をあらかじめPOSTやGETなどで変数指定して、変更可能状態にすれば、お手軽に任意のサイズにリサイズする事もできる。
ウェブサービスのスパイスとして活躍できそうなアイテムですね。
紹介ページは、ダウンロードページと同じ。
PHP & jQuery image upload and crop v1.2 | WebMotionUK
実際に設置してみたので公開しようかとおもったのですが、際限なくアップロードファイルが溜まっていくので、sampleデモページをどうぞ。
サンプルデモ
それでは。また。