ドリリウム

趣味をとことん突き詰めるブログ。高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / BMW / 地方移住 / ルノー・ルーテシア

【PHP】文字入り画像を描画する方法

ドリリウムは移転しました。

約5秒後に自動的にリダイレクトします。

f:id:katamichinijikan:20180721193517p:plain

PHPで1から画像を描画したり、画像内に文字を埋め込む方法を紹介します。

 

ブログに便利なツール集「BLOGTOOLS」内のA4用紙比イメージはがき比イメージを自動生成するために使用しました。

xs147277.xsrv.jp/blogtools

 

例えばこんな風に、商品を紹介する時に寸法をA4用紙やはがきと手軽に比較するために作成しました。

f:id:katamichinijikan:20190630202408p:plain

こんな画像を作る方法を紹介します。

ステップ1 画像を作る

画像を作るにはimagecreateメソッドを使用します。

$image = imagecreate(500, 500);

引数は、第一引数が幅、第二引数が高さです。

返り値は画像リソースのIDです。失敗するとfalseが返されます。

 

実際に使用する際には、事前に画像の幅と高さを計算してから画像を生成します。

ステップ2 四角を描く

次に、ステップ1で作った画像に、imagefilledrectangleメソッドを使って四角を描いてみましょう。

$image = imagecreate(500, 500);
$black = imagecolorallocate($image, 0, 0, 0);
imagefilledrectangle($image,10, 10, 50, 50, $black);

imagefilledrectangleの引数は以下の通りで、シンプルです。

  • 第1引数 :画像リソースID
  • 第2引数:X座標(始点)
  • 第3引数:Y座標(始点)
  • 第4引数:X座標(終点)
  • 第5引数:Y座標(終点)
  • 第6引数:色ID

画像リソースIDにはimagecreateメソッドで生成した画像リソースIDを指定します。

色IDはimagecolorallocateメソッドで取得します。

第1引数に画像リソースIDを指定し、続く引数はそれぞれR・G・Bです。

0~255の10進数もしくは16進数でも指定可能です。

ステップ3 文字を描く

次に文字を描いてみましょう。

特に日本語(2バイト文字)を描画したい場合には、TTF(True Type Font)ファイルを用意する必要があります。ネットでフリーのTTFフォントを探すか、インストール済みのTTFファイルを使いましょう。

imagettftextメソッドを使用します。

 //画像リソース生成
$image = imagecreate(500, 500);
//フォントファイル
$ttf = "/fontfile.ttf";
//文字色
$fontcolor = imagecolorallocate($image, 255, 0, 0);
//文字を描画
imagettftext($image, 40, 0, 100, 100, $fontcolor, $ttf, "文字を入れるよ");

 imagettftextメソッドの引数は以下の通りで、これまたシンプルです。

  • 第1引数:画像リソースID
  • 第2引数:フォントサイズ
  • 第3引数:文字の角度
  • 第4引数:文字を入れるX座標
  • 第5引数:文字を入れるY座標
  • 第6引数:色ID
  • 第7引数:フォントファイルのパス
  • 第8引数:文字

ステップ3.5 描画した文字の大きさを取得する

画像を生成する際には事前に適切な幅と高さを計算しておく必要があります。

自分で描く図形などは幅や高さがわかりますが、文字の幅や高さは計算する必要があります。

imagettfbboxメソッドを使用します。

 $ttf = "/fontfile.ttf";
$textbox = imagettfbbox(40, 0, $ttf, "文字を入れるよ");
 $width = $textbox[4] - $textbox[6];
 $height = $textbox[1] - $textbox[7];

 imagettfbboxメソッドの引数は、フォントサイズ、文字の角度、フォントファイルのパス、文字をそれぞれ指定します。

すると文字を描画した際の画像の大きさを配列で返してくれます。

配列の中身は以下のとおりです。

0 左下X座標
1 左下Y座標
2 右下X座標
3 右下Y座標
4 右上X座標
5 右上Y座標
6 左上X座標
7 左上Y座標
powered by BLOGTOOLS.

右上のX座標から左上のX座標を引けば、幅が取得できます。

左下のY座標から左上のY座標を引けば、高さが取得できます。

 

ブログを書いている人

カタミチ

ご意見・お問い合わせ等:syufukc@gmail.com

プライバシーポリシーおよび広告掲載等に関する表示事項