【PHP】画像をリサイズして生成したサムネイルをブラウザに表示させる方法
あるURLに実寸サイズの画像URLとリサイズしたい幅をGETパラメータで渡すだけでサムネイル的画像が返ってくる!みたいなことをやりたくて作ってみましたので、今日はその方法を紹介出来ればと思います。
プログラミングやWordPressを習得するのに一番近道な方法とは?
目次
まずはGDが使えるか確認
GDとはPHPでpng,jpeg,gifなどの画像を色々と操作出来るPHP5.2以上からデフォルトの拡張機能になっているライブラリです。
今回はこのGDを使うのでまずは自分の環境でGDが使えるか確認しましょう。
確認方法はecho phpinfo();などでPHPの設定情報を画面に表示させちゃうと楽です。
gd項目のGD Supportがenableになっていれば大丈夫です。
もしdisableになっている場合は、「php.ini」を開いて「extension=php_gd2.dll」を検索してください。
1 | ;extension=php_gd2.dll |
と先頭にセミコロンがあればコメントアウトされていますので、これを削除しましょう。
1 | extension=php_gd2.dll |
「php.ini」を保存してApacheなどのWEBサーバを再起動すれば使えるようになります。
もしgdの項目自体無い場合はインストールしなくてはいけませんので、
の記事などを参考にして頂けると助かります。
コードを書いてきます
やりたいことを再確認すると「あるURLに実寸サイズの画像URLとリサイズしたい幅をGETパラメータで渡すだけでサムネイル的画像が返ってくる!」
ですので、呼び出す側のHTMLはこんな感じ。
1 | <img src="thumbnail?url=ここに実寸サイズの画像URL&width=150"> |
そしてこちらが本題の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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | if (!empty($_GET['url'])) { $image_file = $_GET['url']; } $new_width = 100; if (!empty($_GET['width'])) { $new_width = $_GET['width']; } // 元画像のファイルサイズを取得 list($original_width, $original_height) = getimagesize($image_file); //元画像の比率を計算し、高さを設定 $proportion = $original_width / $original_height; $new_height = $new_width / $proportion; //高さが幅より大きい場合は、高さを幅に合わせ、横幅を縮小 if($proportion < 1){ $new_height = $new_width; $new_width = $new_width * $proportion; } $file_type = strtolower(end(explode('.', $image_file))); if ($file_type === "jpg" || $file_type === "jpeg") { $original_image = ImageCreateFromJPEG($image_file); //JPEGファイルを読み込む $new_image = ImageCreateTrueColor($new_width, $new_height); // 画像作成 } elseif ($file_type === "gif") { $original_image = ImageCreateFromGIF($image_file); //GIFファイルを読み込む $new_image = ImageCreateTrueColor($new_width, $new_height); // 画像作成 /* ----- 透過問題解決 ------ */ $alpha = imagecolortransparent($original_image); // 元画像から透過色を取得する imagefill($new_image, 0, 0, $alpha); // その色でキャンバスを塗りつぶす imagecolortransparent($new_image, $alpha); // 塗りつぶした色を透過色として指定する } elseif ($file_type === "png") { $original_image = ImageCreateFromPNG($image_file); //PNGファイルを読み込む $new_image = ImageCreateTrueColor($new_width, $new_height); // 画像作成 /* ----- 透過問題解決 ------ */ imagealphablending($new_image, false); // アルファブレンディングをoffにする imagesavealpha($new_image, true); // 完全なアルファチャネル情報を保存するフラグをonにする } else { // 何も当てはまらなかった場合の処理は書いてませんので注意! return; } // 元画像から再サンプリング ImageCopyResampled($new_image,$original_image,0,0,0,0,$new_width,$new_height,$original_width,$original_height); // 画像をブラウザに表示 if ($file_type === "jpg" || $file_type === "jpeg") { ImageJPEG($new_image); } elseif ($file_type === "gif") { ImageGIF($new_image); } elseif ($file_type === "png") { ImagePNG($new_image); } // メモリを開放する imagedestroy($new_image); imagedestroy($original_image); |
このコードが対応していること
- JPEG,GIF,PING全て対応
- GIF,PINGに透過がある場合の諸問題に対応
- 横幅と縦幅の長短に合わせ等サイズのままリサイズ
- サムネイル画像を保存しないのでリソースも安心
問題点
このままブラウザに表示させるとimgタグにwidthとheightが入っていないのでブラウザ表示に少し時間がかかってしまいます。
ですのであらかじめDBなどにリサイズした際の横幅と縦幅の値をあらかじめ入れておくなどが必要になってくるかなと思います。
圧縮比率を高めたい時
圧縮比率を高めたいと思った時は最後にブラウザに表示させる時に使用するImagexxx関数の引数を増やせばOKです。
具体的に書いていくと、
JPEGの場合
3つ目の引数に品質があります。
0〜100まで設定できデフォルトでは75に設定されていますが、これを小さくしていくと圧縮比率を高めることが出来ます。
このようにすればOK。
詳しくはマニュアルを参考にしてください。
PNGの場合
これにも3つ目の引数に品質があります。
0〜9まで設定できデフォルト…すみません、分からなかったですがこちらは9に近いほうが圧縮比率が高いです。
JPEGと反対なので注意してください。
このようにすればOK。
詳しくはこちらもマニュアルを参考にしてください。
GIFの場合
すみません、GIFの場合はimagegif関数に品質などの引数がなかったので良く分からなかったです。
まあgifは圧縮など必要ないですかね。
まとめ
簡素ではありますが一応自分のやりたかったことは出来ました。
このコードを使用する場合はあくまで自己責任でお願いしますね汗
画像系は色々なライブラリがあるようなので自分に合ったものを探してみても面白いと思います。
私は画像系はあんまり触ったことが無かったのでだいぶ勉強になって楽しかったです^^
参考にさせていただいたサイト
- 簡易画像変換+圧縮スクリプト
- GDを使った画像のリサイズ | ブログ名は後で考える
皆さまありがとうございました!