PHPを手軽に使って、画像のサムネイルを出力する方法
写真などの画像を大量に見せるサイトでは、
元の大きさの画像を直接配置せずに、
画像を縮小したサムネイル画像をまず配置し、
そこをクリックしたときに、リンクやライトボックスなどで元の大きさの画像を見せるというやり方がよく行われます。
このとき、WordpressやMTなどのCMSを使っている場合は、CMSの機能を使ってサムネイルを動的にできますが、
CMSを使わないべた書きのサイトの場合は、サムネイル画像を一つずつ準備しなくてはならず、とても手間がかかります。
CMSを使うまではなくても、元の大きさの画像から動的にサムネイル画像を出力できれば、
その手間を省くことができます。
そこで、PHPを使って、サムネイル画像を動的に出力する方法について調べて、作ってみました。
今回は、直接PHPを PHPファイル上に書くのではなく、
HTMLから、<img>のソースとしてPHPを指定してサムネイル画像を取得する方法を考えました。
まず、HTMLで、画像を取得する記述をします。
|
1 | <a href="images/image01.jpg"><span class="image"><img src="outimg.php?url=images/image01.jpg&width=120"></span><span class="cover"></span></a> |
<img>のソースに、サムネイル画像を出力するPHPを指定し、GETとして、元画像のURLとサムネイルの横幅を指定します。
これで、静的なHTMLから、PHPにアクセスできます。
次にPHPを記述します。
画像の大きさ変更と出力の方法については、こちらのサイトを参考にさせていただいてます
ちなみにこの方法では、GDライブラリを使っているため、PHPのバージョンが4.3以降か、事前にGDライブラリをインストールしている必要があります。
まずは、GETから、元画像のURLとサムネイルの大きさを取得します。
|
1 2 3 | // 元画像のURLと出力する画像サイズをGETから取得 $url = $_GET["url"]; $width = $_GET["width"]; |
次に、元画像の大きさを取得し、比率を割り出して、サムネイル画像の高さを調整します。
縦長だった場合は、高さをwidthで指定された大きさにして、幅を調整します。
|
1 2 3 4 5 6 7 8 9 10 11 12 | // 元画像のファイルサイズを取得 list($image_w, $image_h) = getimagesize($url); //元画像の比率を計算し、高さを設定 $proportion = $image_w / $image_h; $height = $width / $proportion; //高さが幅より大きい場合は、高さを幅に合わせ、横幅を縮小 if($proportion < 1){ $height = $width; $width = $width * $proportion; } |
これらの情報をもとに、画像を出力します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // サイズを指定して、背景用画像を生成 $canvas = imagecreatetruecolor($width, $height); // URLから、画像インスタンスを生成 $image = imagecreatefromjpeg($url); // 背景画像に、画像をコピーする imagecopyresampled($canvas, // 背景画像 $image, // コピー元画像 0, // 背景画像の x 座標 0, // 背景画像の y 座標 0, // コピー元の x 座標 0, // コピー元の y 座標 $width, // 背景画像の幅 $height, // 背景画像の高さ $image_w, // コピー元画像ファイルの幅 $image_h // コピー元画像ファイルの高さ ); // 画像を出力する imagejpeg($canvas, // 背景画像 "", // 出力するファイル名（省略すると画面に表示する） 100 // 画像精度（この例だと100%で作成） ); // メモリを開放する imagedestroy($canvas); |
これで、元画像からサムネイル画像を動的に生成することができるようになりました。
↓こちらが実際にこの仕組みを使ってみたものです。
DEMO
↓そして、こちらがサムネイル画像を生成するPHPの全文です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <?php // 出力する画像サイズの指定 $width = $_GET["width"]; $url = $_GET["url"]; // 元画像のファイルサイズを取得 list($image_w, $image_h) = getimagesize($url); //元画像の比率を計算し、高さを設定 $proportion = $image_w / $image_h; $height = $width / $proportion; //高さが幅より大きい場合は、高さを幅に合わせ、横幅を縮小 if($proportion < 1){ $height = $width; $width = $width * $proportion; } // サイズを指定して、背景用画像を生成 $canvas = imagecreatetruecolor($width, $height); // ファイル名から、画像インスタンスを生成 $image = imagecreatefromjpeg($url); // 背景画像に、画像をコピーする imagecopyresampled($canvas, // 背景画像 $image, // コピー元画像 0, // 背景画像の x 座標 0, // 背景画像の y 座標 0, // コピー元の x 座標 0, // コピー元の y 座標 $width, // 背景画像の幅 $height, // 背景画像の高さ $image_w, // コピー元画像ファイルの幅 $image_h // コピー元画像ファイルの高さ ); // 画像を出力する imagejpeg($canvas, // 背景画像 "", // 出力するファイル名（省略すると画面に表示する） 100 // 画像精度（この例だと100%で作成） ); // メモリを開放する imagedestroy($canvas); ?> |
PHPを使える環境が必要ですが、データーベースなどを用意する必要もないので、
手軽にサムネイル画像を動的に生成する時に便利な方法だと思います。
追記：
PHPで画像を出力するときは、ヘッダーの設定をしないといけませんでした。
今回の場合はJPEGなので、
|
1 | header('Content-type: image/jpeg'); |
という記述を、PHP内で行う必要がありました。
Author Profile
SHARE
