Symfoware

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

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

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

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

仕様

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










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

サンプル

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

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

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

出力した画像はこれになります。

関連記事

• FreeBSD 9.0-RELEASEをVirtualBoxにネットワークインストールする
• ResinをDebianにインストールして動作させる
• PHP GDを使用して、複数の画像を１つの画像ファイルにまとめる
• Resource Hackerで実行ファイルのアイコンリソースを変更する
• CLEditorに背景画像を表示し、表示する内容をボタンで切り替える