前回、PHP GDライブラリを使用したサーバー上で画像加工 その1
で解説した基礎編に続き、PHP GDライブラリを使用したサーバー上で画像加工 その2
として、今回は実際にJPEG画像を読み込んで、文字列を合成してJPEG画像で保存する画像加工を行います。
文字は、縁取りをして見易くなるように工夫します。
文字を合成する主となるGDライブラリ関数
文字列を画像の指定位置、角度で TureTypeフォントで描画する
「imagettftext」関数を用います。
imagettftext (画像リソース, フォントサイズ, 文字角度, 文字開始位置X, 文字開始位置y, 文字色, フォントファイル, 文字列);
文字開始位置は、文字の左下の位置です。(左上ではない)
TrueTypeフォントファイルを入手する
今回用いたTrueTypeフォントファイルは、
IPAフォント(Ver.3)で以下のサイトから
ダウンロードできます。
ダウンロードするファイルは、
TTFファイルの
・4書体パック(Ver.003.03)
IPAfont00303.zip(19.1 MB)
です。
ダウンロードには、IPAフォントライセンスv1.0の同意が必要です。
Zipファイルので、解凍してサーバーにアップロードして使います。
解凍すると 4種類のフォントファイルが現れます。
ipag.ttf (IPA ゴシック)
ipagp.ttf (IPA Pゴシック)
ipam.ttf (IPA明朝)
ipamp.ttf (IPA P明朝)
今回は、「IPA Pゴシック」を使ってみました。
JPEGファイルに文字列を合成する画像加工
JPEG画像ファイル sample01.jpg
TrueTypeフォントファイル ipagp.ttf
画像加工PHPファイルは、insert_text.php
サーバーの同じフォルダにアップロードしてあるものとします。
合成する文字列は、「倉敷 情緒あふれる白壁の屋敷」の黒文字で
縁取りの色は、灰色
画像加工PHPファイルの作成
サンプルコード insert_text.php
<?php header('Content-Type: text/html; charset=UTF-8'); mb_language("Japanese"); mb_internal_encoding("UTF-8"); mb_http_input("UTF-8"); mb_http_output('UTF-8'); // 元画像ファイル(JPEG) $org_img = __DIR__."/sample01.jpg"; // 加工後の画像ファイル(JPEG) $out_fname = __DIR__."/sample01a.jpg"; // フォントファイル $font_fname = __DIR__."/ipagp.ttf"; // 表示文字列 $text = "倉敷 情緒あふれる白壁の屋敷"; // 文字サイズ(px) $font_size = 30; // 文字の表示角度 $font_rot = 0; // 文字表示開始位置 $ins_pos_x = 80; $ins_pos_y = 100; // 指定する位置パラメータ $pos_x = $ins_pos_x; $pos_y = $ins_pos_y + $font_size; try{ // JPEG画像の読み込み $img = imagecreatefromjpeg($org_img); // 縁取る色を準備(薄い白) $edge_color = imagecolorallocate($img, 0xee, 0xee, 0xee); // 文字色を準備(黒) $main_color = imagecolorallocate($img, 0x00, 0x00, 0x00); // 文字を縁取る(8方向) imagettftext($img, $font_size, $font_rot, $pos_x-1, $pos_y-1 , $edge_color, $font_fname, $text); imagettftext($img, $font_size, $font_rot, $pos_x , $pos_y-1 , $edge_color, $font_fname, $text); imagettftext($img, $font_size, $font_rot, $pos_x+1, $pos_y-1 , $edge_color, $font_fname, $text); imagettftext($img, $font_size, $font_rot, $pos_x-1, $pos_y , $edge_color, $font_fname, $text); imagettftext($img, $font_size, $font_rot, $pos_x+1, $pos_y , $edge_color, $font_fname, $text); imagettftext($img, $font_size, $font_rot, $pos_x-1, $pos_y+1 , $edge_color, $font_fname, $text); imagettftext($img, $font_size, $font_rot, $pos_x , $pos_y+1 , $edge_color, $font_fname, $text); imagettftext($img, $font_size, $font_rot, $pos_x+1, $pos_y+1 , $edge_color, $font_fname, $text); // 文字列を表示 imagettftext($img, $font_size, $font_rot, $pos_x, $pos_y, $main_color, $font_fname, $text); // 加工後の画像をJPEGで保存 imagejpeg($img, $out_fname); // イメージリソースメモリ解放 imagedestroy($img); } catch(Exception $e) { // エラー発生 echo $e->getMessage(); } ?>
文字の縁取りは、確実に縁取りをするために、
あらかじめ縁取り色の文字列を表示位置に対して縦、横±1Pxの範囲で
8方向にずらして縁取り部分を重ねて描画して行き
その後、表示色で文字列を上書きしています。
-1 0 +1
〇〇〇 -1
〇●〇? 0
〇〇〇 +1
〇:縁取り
●:表示文字
画像加工結果
加工前
文字列合成加工後
のようになります。