[PHP] サーバーにあるWebフォントで文字を画像変換してみる

[PHP] サーバーにあるWebフォントで文字を画像変換してみる

サーバーにWebフォントをインストールして、PHPを使って文字を画像データに変換してみました。

imagefttextでテキストを画像変換する手順

PHPで文字を変換するために、imagefttext というメソッドを使っています。
これを使うと、TrueType フォントを使用して画像に書き込みができるようになるんですな。

1. パラメータを指定

「size」「font」「value」「color」とそれぞれのパラメータをPHPに渡して自由に画像生成できるようにします。また、それぞれの値が省略されたときにも対応するようにデフォルト値を指定。
カラーは6桁のRGB値を指定して、内部で16進数に変換しています。

PHP

define('DEFAULT_SIZE',30);
define('DEFAULT_FONT','migmix-1p-regular.ttf');
define('DEFAULT_VALUE','empty');
define('DEFAULT_COLOR','000000');

//フォントサイズ
$font_size = DEFAULT_SIZE;
if (isset($_GET['size'])) {
    $font_size = intval($_GET['size']);
    if ($font_size < 8 ) $font_size = 8;
    else if ($font_size > 240) $font_size = 240;
}

//TTFフォントのパス
$font_face = DEFAULT_FONT;
if (isset($_GET['font'])) {
    $font_face = $_GET['font'];
}
$font_path = "./font/".$font_face;

//組み込みテキスト
$org_value = DEFAULT_VALUE;
if (isset($_GET['value'])) {
    $org_value = $_GET['value'];
    $org_value = rawurldecode($org_value);
    if (empty($org_value)) $org_value = DEFAULT_VALUE;
}

//テキストカラー
$rgb_color = DEFAULT_COLOR;
if (isset($_GET['color'])) {
    $rgb_color = $_GET['color'];
}
$font_color = intval($rgb_color, 16);

2. 画像の幅と高さを取得

指定されたパラメータから、フォントのベースポイントと大きさを測定して、幅と高さを取得。

フォントペースライン位置の指定がフォントによってそれぞれ違うので、余裕を持たせてフォントサイズの1.15倍にしています。この値が足りないと文字の上部が欠けるので注意！
横幅も途中で切れちゃう文字とかもあったので、フォントサイズの0.35倍を加算しています。

画像の高さは、「{右下} – {左上} = {高さ}」を基準にして大丈夫かなと思ったけど、どうやら半角英数字にしたときと全角文字を混ぜたときとで違う高さになるので、フォントの種類によっては足りなくなるみたいなので、フォントサイズを基準にして調整しました。

PHP

//最初の文字のX座標のベースポイント
$tx = 2;

//フォントペースラインの位置
$ty = $font_size * 1.15;

// 大きさを測定
$bbox = imagettfbbox($font_size, 0, $font_path, $org_value);

//左上
$x0 = $bbox[6];
$y0 = $bbox[7];

//右下
$x1 = $bbox[2];
$y1 = $bbox[3];

//幅と高さを取得
$width = $x1 - $x0 + $font_size * 0.35 + 4;
//$height = $y1 - $y0 + $font_size * 0.3;
$height = $font_size * 1.5 + 2;

3. 指定された値と取得した値から画像を生成

取得した値から画像領域を確保し、透明な背景を描画します。
背景は絶対白だ！というこだわりをもった人は白く塗ってもいいです。

フォントサイズ、ベーズポイント、アングル（今回は0）、フォントカラー、TrueTypeフォントがあるパス、文字の値、をそれぞれ imagefttext メソッドに指定して、テキストを描画。

最後にヘッダーをpngに指定して出力します。

PHP

//イメージ描画枠作成
$im = imagecreatetruecolor($width, $height);

//背景色
$background_color = imagecolorallocatealpha($im, 255, 255, 255, 127);
imagealphablending($im, true); // ブレンドモードを設定する
imagesavealpha($im, true); // 完全なアルファチャネルを保存する
imagefill($im, 0, 0, $background_color);

//テキスト描画
imagefttext($im, $font_size, 0, $tx, $ty, $font_color, $font_path, $org_value);

//PNG形式で標準出力へ
header("Content-type: image/png");
imagepng($im);

//イメージ破棄(メモリ開放)
imagedestroy($im);

サンプル

サンプルは別ページにあります。

PHPに文字を渡すときに JavaScript の encodeURIComponent を使ってURLエンコードをかけています。
これをしないと渡せない文字列が発生してしまうのでご注意を。

サンプルで使っているフォントは、Webフォントとして使っても良さそうなものがあったので、そちらを使わせて頂きました。

WebFonts として利用できるフリーの和文フォント | ヨモツネット

  • 2011.10.31
  • Hiroaki Komatsu