今回は複数の画像を並べて↑のような１つの画像を作成してみました。
画像Aに画像Bを重ねるような処理は以前作成した記事でも確認出来ました。
複数の画像を重ねたり並べて配置したりする場合にはどうしたらいいのか疑問に思って実験してみました。
赤や青の画像はそれぞれ個別に作成してあります。
1つ1つの画像は500×500で、完成後の画像は1500×1000になります。
ではさっそく作っていきましょう。
PHPで複数の画像を繋げて1つの画像を作成するコード
// 出力ファイル名 $newfile = "color.jpg"; // カラー画像ファイル名 $file_aka = "img_aka.jpg"; $file_pink = "img_pink.jpg"; $file_mura = "img_mura.jpg"; $file_ao = "img_ao.jpg"; $file_mizu = "img_mizu.jpg"; $file_midori = "img_midori.jpg"; // キャンバス画像の作成と背景を白に設定 $base_image = imagecreate(1500, 1000); imagecolorallocate($base_image, 255, 255, 255); // 画像配置サイズ $to_w = 500; $to_h = 500; // 赤の画像読み込み $src_image = imagecreatefromjpeg($file_aka); $imagesize = getimagesize($file_aka); $src_w = $imagesize[0]; $src_h = $imagesize[1]; // 赤画像貼り付け imagecopyresampled( $base_image, // コピー先の画像 $src_image, // コピー元の画像 0, // コピー先の x 座標 0, // コピー先の y 座標。 0, // コピー元の x 座標 0, // コピー元の y 座標 $to_w, // コピー先の幅 $to_h, // コピー先の高さ $src_w, // コピー元の幅 $src_h); // コピー元の高さ // ピンクの画像読み込み $src_image = imagecreatefromjpeg($file_pink); $imagesize = getimagesize($file_pink); $src_w = $imagesize[0]; $src_h = $imagesize[1]; // ピンク画像貼り付け imagecopyresampled( $base_image, // コピー先の画像 $src_image, // コピー元の画像 500, // コピー先の x 座標 0, // コピー先の y 座標。 0, // コピー元の x 座標 0, // コピー元の y 座標 $to_w, // コピー先の幅 $to_h, // コピー先の高さ $src_w, // コピー元の幅 $src_h); // コピー元の高さ // 紫の画像読み込み $src_image = imagecreatefromjpeg($file_mura); $imagesize = getimagesize($file_mura); $src_w = $imagesize[0]; $src_h = $imagesize[1]; // 紫画像貼り付け imagecopyresampled( $base_image, // コピー先の画像 $src_image, // コピー元の画像 1000, // コピー先の x 座標 0, // コピー先の y 座標。 0, // コピー元の x 座標 0, // コピー元の y 座標 $to_w, // コピー先の幅 $to_h, // コピー先の高さ $src_w, // コピー元の幅 $src_h); // コピー元の高さ // 青の画像読み込み $src_image = imagecreatefromjpeg($file_ao); $imagesize = getimagesize($file_ao); $src_w = $imagesize[0]; $src_h = $imagesize[1]; // 青画像貼り付け imagecopyresampled( $base_image, // コピー先の画像 $src_image, // コピー元の画像 0, // コピー先の x 座標 500, // コピー先の y 座標。 0, // コピー元の x 座標 0, // コピー元の y 座標 $to_w, // コピー先の幅 $to_h, // コピー先の高さ $src_w, // コピー元の幅 $src_h); // コピー元の高さ // 水色の画像読み込み $src_image = imagecreatefromjpeg($file_mizu); $imagesize = getimagesize($file_mizu); $src_w = $imagesize[0]; $src_h = $imagesize[1]; // 水色画像貼り付け imagecopyresampled( $base_image, // コピー先の画像 $src_image, // コピー元の画像 500, // コピー先の x 座標 500, // コピー先の y 座標。 0, // コピー元の x 座標 0, // コピー元の y 座標 $to_w, // コピー先の幅 $to_h, // コピー先の高さ $src_w, // コピー元の幅 $src_h); // コピー元の高さ // 緑の画像読み込み $src_image = imagecreatefromjpeg($file_midori); $imagesize = getimagesize($file_midori); $src_w = $imagesize[0]; $src_h = $imagesize[1]; // 緑画像貼り付け imagecopyresampled( $base_image, // コピー先の画像 $src_image, // コピー元の画像 1000, // コピー先の x 座標 500, // コピー先の y 座標。 0, // コピー元の x 座標 0, // コピー元の y 座標 $to_w, // コピー先の幅 $to_h, // コピー先の高さ $src_w, // コピー元の幅 $src_h); // コピー元の高さ imagejpeg($base_image, $newfile);
コード解説
解説の前に・・・上記コードよりうまく書く方法があれば教えてください(笑)
なんだか自分で書いたものですが、全体的にださい感じがしますね。
各色の画像を重ねる処理をループで書ければまだよかったのですが、変に複雑な処理を書かずに1つ1つばらすことで初心者の方が見ても分かりやすいと思いバラバラにしました。
さて全体的な処理の手順としては以下の通りです。
- ベースの画像を定義する。
- 各色の画像を読み込む。
- 各色の画像のサイズを取得する。
- 各色の画像をそれぞれ配置していく。
- 完成形として出力する。
1.のベース画像はimagecreate()を使って定義します。
その後、次の行で色を指定していますが、これは無くてもOKです。
2.はimagecreatefromjpeg()を使って既に作成していた正方形の赤や青の画像を読み込みます。
3.でサイズを取得していますが、今回は画像を自分で作成したのでサイズは元々ぴったりですが、そうで無い場合のチェックやリサイズのために取得しています。
4.でimagecopyresampled()を使ってベース画像に各色画像を配置します。
配置先座標や配置後のサイズなどを指定できます。
2～4の作業は各色で配置座標を変えながら同様の処理を繰り返します。
5.最後にファイル名を指定してベース画像を出力すれば完成です。
今回は僕がずぼらなので単色の画像を複数作成し配置するサンプルを作成しました。
単色なのでもはや各色の画像を読み込まなくても最終的に同じものを作れるというご指摘はなしでお願いします。
まとめ
画像Aと画像Bを重ねる処理はimagecopyresampled()を使えばできました。
複数の画像を扱うにはどうしたらいいのかと思いましたが、imagecopyresampled()を何度も実行するだけでしたね！
並べる際には画像のサイズと座標に注意する必要があります。
注意いながら使ってください。
コメント