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

  • 2009/03/09
  • このエントリーをはてなブックマークに追加

スポンサーリンク

リサイズクリップ

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

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

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

仕様


必要なものは、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デモページをどうぞ。
サンプルデモ

それでは。また。


スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html