2016/03/16 18:09:32

PHPでGDライブラリを使って画像リサイズ(サムネイル画像を作る)をやってみる


Warning: Attempt to read property "post_excerpt" on null in /home/kpkyvkzp/public_html/unskilled.site/wp-content/themes/unskilled2/content-header-eyecatch.php on line 5
目次(クリックするとジャンプします)
  • 1:PHPで画像編集したい
  • 1.1:サムネイルを作ってみる
  • 1.2:トリミングしてサムネイル作るよ
  • 1.3:中央トリミングでサムネイルを作るよ
  • 1.4:おまけ・縮小なしでトリミングしてサムネイルを作るよ
  • 2:まとめ

PHPで画像編集したい

ちょっとした画像編集ならGDライブラリは簡単なので便利です。今回は需要が高いであろう画像のリサイズをしてサムネイル画像を作ってみたいと思います。これができればサーバに自動でサムネイル作らせられますね。

今回の記事で中心になるのは

imagecopyresampled関数です。

この関数の引数に関してはPHPマニュアルで確認してみてください。

PHPマニュアル imagecopyresampled

この関数はリサンプリングを用いてリサイズを行ってくれます。GDにはもうひとつimagecopyresized関数がありますが、こちらはリサンプリングを行わないので結果があまり綺麗ではありません。

特に理由がないのならimagecopyresampled関数を使うのが良いと思います。

さて今回テストで使うのは元画像はこちら。

neko

  • jpeg
  • 横幅 750px
  • 縦幅 1000px

この画像を300×300にリサイズし、サムネイル画像として保存してみたいと思います。

サムネイルを作ってみる

ざっくりコードはこんな感じです。

処理の流れとしてはコメントをもう一度繰り返すと

  • 元の画像のサイズを取得する
  • サムネイルになる土台の画像を作る
  • 元の画像を読み込む
  • サムネイルになる土台の画像に合わせて元の画像を縮小しコピーペーストする
  • 圧縮率60で保存する

と言った感じになります。図にするとイメージはこんな感じ。

gd_resize

さて先程の処理で保存されたサムネイル画像はこんな感じになりました。

neko_thumbnail

あれ?なんか縦横比が変わっていますね…。ぶにょってなってる…。

それもそのはず、元画像とサムネイルの縦横比は違います。サムネイルが正方形なのに対して、元画像は長方形です。縦横比が変わっても問題なければいいのですが、多くの場合あまり好ましくないかと思います。

残念ながらimagecopyresampled関数には自動的に縦横比をあわせてくれるような機能はないので、自分でトリミングする必要があります。

トリミングしてサムネイル作るよ

とはいえトリミングも意外と簡単です。コードを以下の様に修正してみました。

条件式で横幅が大きい場合は縦幅に合わせる、縦幅が大きい場合には横幅に合わせる、元から正方形の場合はそのままという分岐を行っています。

イメージとしてはこんな感じ

gd_resize_diff

今回の場合縦幅が大きい画像なので、縦幅は横幅に合わせることで正方形にしようとしています。

具体的にはimagecopyresampled関数による元画像のコピー範囲を狭めることで縦横比を合わせている感じです。

実行してみました。

neko_thumbnail_diff

ちゃんと縦横比が保たれていますね。わ〜い。

でもこれでも不満が残ります。この場合必ず上が基準でトリミングされてしまいます。できれば中央を基準にトリミングできればいいかもしれません。

中央トリミングでサムネイルを作るよ

やってみます。

コードでは縦横の差の50%分、コピー位置をずらすことで中央合わせのトリミングにしています。

今回の場合は縦と横では縦が大きく、その差は250pxです。つまり上下に125px分トリミングされていれば中央でトリミングしたことと同じになります。

イメージはこんな感じ。

gd_resize_diff2-1

実行してみます。

neko_thumbnail_diff2

うまくいきました。

上合わせでトリミングした先ほどの画像も並べてみますと、トリミングされている位置が変化していることがわかるかと思います。

neko_thumbnail_diff

でもまあ、この場合だと、こっちトリミングの方がカッコ良いような…。

おまけ・縮小なしでトリミングしてサムネイルを作るよ

場合によっては縮小したくない時もあるかもしれません。縮小を経ずに、トリミングだけを行うことも可能です。部分コピーですね。

コードはこんな感じになります。

イメージはこんな感じ。

gd_resize_diff2

実行結果はこちら。

neko_thumbnail_diff3

縮小なしでトリミングされていますね。

まとめ

  • GDライブラリは画像編集のライブラリ。
  • 画像のリサイズはリサンプリングを行ってくれるimagecopyresampled関数を使うのが良い。
  • リサイズは縦横比を合わせないと、画像がぶにょってなる。
  • いろいろ計算すればトリミング位置を変えることが可能。
  • トリミングだけを行うことも可能。