[PHP] jpg画像ファイルをトリミング/リサイズする。

アフィリエイト広告を利用しています

このページの内容が役に立ったら X (旧twitter) でフォローして頂けると励みになります
挨拶や報告は無しで大丈夫です

webサイトを作るとき、特に画像ギャラリーを作るときに大変な作業があります。
それは、リサイズとトリミングです。

サンプル

次のようなコードを指定すると

<a href="/samples/20110524images/sIMG_0257.jpg">
<img src="/samples/20110524images/sIMG_0257_tr100x100.jpg" />
</a>

このようになります。

 

もうひとつ。

次のようなコードを指定すると

<a href="/samples/20110524images/dir/IMG_0273.jpg">
<img src="/samples/20110524images/dir/IMG_0273_tr100x100.jpg" />
</a>

このようになります。


これはなに?

では、サンプルで使った画像を確認しましょう。

/samples/20110524images/sIMG_0257.jpg
/samples/20110524images/sIMG_0257_tr100x100.jpg
/samples/20110524images/dir/IMG_0273.jpg
/samples/20110524images/dir/IMG_0273_tr100x100.jpg

これらの画像ファイルを指定しています。
しかし、私が用意した画像は、これら2つだけです。

/samples/20110524images/sIMG_0257.jpg
/samples/20110524images/dir/IMG_0273.jpg

もういちどサンプル

<a href="/samples/20110524images/sIMG_0257.jpg">
元の画像</a>

元の画像

<a href="/samples/20110524images/sIMG_0257_tr100x100.jpg">
tr100x100.jpg / 幅100px高さ100pxにトリミングしてリサイズ</a>

tr100x100.jpg / 幅100px高さ100pxにトリミングしてリサイズ

<a href="/samples/20110524images/sIMG_0257_r200x300.jpg">
t200x300 / 幅200px高さ300pxに収まり縦横比を維持してリサイズ</a>

t200x300 / 幅200px高さ300pxに収まり縦横比を維持してリサイズ

<a href="/samples/20110524images/sIMG_0257_t4x3.jpg">
r4x3.jpg / 横縦 4:3の比率で画像中心を基準にトリミング</a>

r4x3.jpg / 横縦 4:3の比率で画像中心を基準にトリミング

使い方

元の画像ファイル名にちょっと文字を追加してアクセスするだけです。

上記で用いた「sIMG_0257.jpg」を例にとります。

「sIMG_0257.jpg」が、もともとアップロードしたオリジナルの画像です。

このファイル名の拡張子の直前にコマンドを挿入します。

「 t 」は、トリミングを表します。
後に続く 4x3 は、横:縦の比率です。4x3ならば、横4:縦3 にトリミングします。

「 r 」は、リサイズを表します。
後に続く、200x300は、幅x高さ(px)です。
縦横比は維持されます。

従って、100x100がもとの画像に、r50x30 を指定した場合、 50x30の画像になるのではなく、30x30の画像となります。
縦横比(100x100)を維持しつつ50x30に収まるできるだけ大きなサイズは、30x30となります。

もし、100x100の画像を、 50x30 の大きさにリサイズしたいのならば、 tr50x30 と指定し、トリミングしたうえでリサイズを行います。

(例)

「sIMG_0257.jpg」を、4:3の大きさにトリミングしたい。
sIMG_0257_t4x3.jpg

「sIMG_0257.jpg」を、300:400の大きさに収まるようにリサイズしたい。
sIMG_0257_r300x400.jpg

「sIMG_0257.jpg」を、300:400の大きさにリサイズしたい。
sIMG_0257_tr300x400.jpg

なにがいいの?

画像ギャラリーのような、サムネイルをクリックして原寸表示をするような場面で、自前でサムネイル画像を作らなくてもすみます。

また、必要な大きさの画像が、URLの指定だけで手に入りますので、ちょっとした変更の度にフォトショップを起動することもなくなるでしょう。

ダウンロード

この配布物に含まれるファイル一式は自由に無料でお使いいただけます。
また、原則としてノークレームノーサポートといたします。

zipファイルを解凍すると、readme.txtが入っていますのでお読みください。

images.zipのダウンロード

※ PHP5.3 で動作確認しています。(PHP4ではおそらく動きません。)

インストール (というほどでもない・・・)

images.zipを解凍します。

本スクリプトを適用したいディレクトリに下記2つのファイルを設置してください。

.htaccess
img.php

設置したディレクトリに、apache(PHP)が書き込みできるようにパーミッションの設定を行います。

たとえば、 /img/ 以下に適用したい場合は、 次のようになります。
/img/.htaccess
/img/img.php

/img には、書き込み権限、実行権限を設定します。

画像ファイルをアップロードします。

上述の例 ( /img )に設置したと仮定すると、
/img 以下のjpgファイル/ディレクトリが対象になります。

ブラウザからアップロードした画像のURLにアクセスしてみましょう。
また、 URLのファイル名を変更して、 _r1x1.jpg とか付けてみましょう。

わくわくしてきますね!

サーバ負荷みたいなもの

CPU/メモリ/転送量については、静的なjpgファイルと同じと考えてOKです。

たとえば、 sample_tr100x100.jpg とアクセスした場合、
最初の1回のみ(ファイルがなければ) PHPが実行されます。
このときに、 sample_tr100x100.jpg を作成します。

2回目以降のアクセスでは、 sample_tr100x100.jpg が存在するため、apacheにより sample_tr100x100.jpg が返されます。

加工画像が作成されますので、HDD容量には余裕を持たせることをおすすめします。