PHP GDライブラリを使用したサーバー上で画像加工 その2

前回、PHP GDライブラリを使用したサーバー上で画像加工 その1

PHP GDライブラリを使用したサーバー上で画像加工 その1
PHPのGDライブラリを使用したインターネットサーバー上での画像加工を行います。 今回はその1として、GDライブラリの確認と基本的なコマンドの説明をします。 GDライブラリ確認 使用しているサーバーにGDライブラリがインストー...

で解説した基礎編に続き、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の同意が必要です。

https://ipafont.ipa.go.jp/old/ipafont/download.html

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

〇:縁取り
●:表示文字

画像加工結果

加工前

文字列合成加工後

のようになります。