PHP GDを使用して、複数の画像を1つの画像ファイルにまとめる

一枚の画像の表示位置を変更して、画像が変更されたような効果を出す方法を調べてました。
jQueryとCSSを使って、画像の一部を切り取り、表示する
CLEditorに背景画像を表示し、表示する内容をボタンで切り替える

サンプルに使った「複数の画像を一枚の画像にまとめたもの」は手動で作成していたのですが、意外と面倒。
PHPのGDでできないか調べてみます。

http://php.net/manual/ja/book.image.php





仕様



サンプルの仕様は、450 x 150pxの画像3枚を1枚の画像に合成します。

50_001.png


50_002.png


50_003.png


合成先の画像サイズは、450 x 600pxとし、各画像を縦方向に合成。
間に50pxの余白を入れることにしました。






サンプル



画像のコピーには、imagecopyを使います。
http://www.php.net/manual/ja/function.imagecopy.php

意外とお手軽にできました。



  1. <?php
  2. define("WIDTH", 450); //出力する画像の幅
  3. define("HEIGHT", 600); //出力する画像の高さ
  4. //出力先の画像を作成
  5. $dst_im = imagecreatetruecolor(WIDTH, HEIGHT);
  6. //白で塗りつぶしておく
  7. $white = imagecolorallocate($dst_im, 0xFF, 0xFF, 0xFF);
  8. imagefill($dst_im, 0, 0, $white);
  9. //コピーする画像1枚目を取得(赤色)
  10. $src_im = imagecreatefrompng('red.png');
  11. //出力先の画像に貼り付け
  12. imagecopy($dst_im, $src_im, 0, 0, 0, 0, 450, 150);
  13. imagedestroy($src_im);
  14. //コピーする画像2枚目を取得(黄色)
  15. $src_im = imagecreatefrompng('yellow.png');
  16. //出力先の画像に貼り付け
  17. //この時、dst_x(貼り付け先のx座標)に200を指定することで、貼り付け位置を下にずらす
  18. imagecopy($dst_im, $src_im, 0, 200, 0, 0, 450, 150);
  19. imagedestroy($src_im);
  20. //コピーする画像3枚目を取得(緑色)
  21. $src_im = imagecreatefrompng('green.png');
  22. //出力先の画像に貼り付け
  23. //この時、dst_x(貼り付け先のx座標)に400を指定することで、貼り付け位置をさらに下へずらす
  24. imagecopy($dst_im, $src_im, 0, 400, 0, 0, 450, 150);
  25. imagedestroy($src_im);
  26. //デバッグ用
  27. //結果がわかりやすいように矩形で画像全体を囲む
  28. $black = imagecolorallocate($dst_im, 0x00, 0x00, 0x00);
  29. imagerectangle($dst_im, 0, 0, WIDTH-1, HEIGHT-1, $black);
  30. //ファイルの保存
  31. imagepng( $dst_im, 'merged.png');
  32. //メモリ開放
  33. imagedestroy($dst_im);
  34.         
  35. ?>




出力した画像はこれになります。
50_004.png






関連記事

コメント

すごく参考になりました。ありがとうございました。

Re: タイトルなし

コメント、ありがとうございます。
お役に立てたようで、嬉しいです。
非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ