ホームページを作る人のネタ帳

簡単!PHPとjQueryでドラックすればリサイズクリップ出来るスクリプト

リサイズクリップ

なかなか凄いぞ!
jQueryとPHPのモジュールで簡単に動いてしまった。
画像をアップロードして、カットしたいところをドラッグ。

その部分が指定したサイズになってクリップされるという代物。

因みに今回アップロードで使用した画像は美人時計さんのもので、1分おきに美人が現れる時計式ウェブサイトです。これも同時にお勧め。

仕様


必要なものは、PHP4もしくはPHP5。
そしてPHP GD ライブラリがサーバーにインストールされている必要がある。

逆に言えばこれだけクリアしていればものすごく手軽に設置できるという魅力あるスクリプトです。

仕様としては、アップローダーが付いており、そこに画像をアップすると、編集モードになる。
そこで、写真の好きなところをドラックして囲い込みをすればそこが画像としてリサイズできるのです。

リサイズとクリップ


ダウンロードは以下


Download0001.jpg

ページ下部にある以下のリンクから。
ダウンロード案内


ダウンロードした後は


展開すると一つだけフォルダが足りない。
それを追加してあげる必要がある。

ダウンロードした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デモページをどうぞ。
サンプルデモ

それでは。また。
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply