ようこそのお運びで、厚く御礼申し上げます。
72日目です。GDを使って色々していますが、今回は画像にテキストを合成してみようと思います。署名のプラグインを順を追って作ってみます。
画像とテキストを合成して、１枚の画像をメディアに追加する（上書きする）。
選択した画像にテキストを合成して、１枚の画像をWordPressの「メディア」ライブラリに追加します（新規と上書きは選択）。
GDや画像の再作成については前回の記事を参照。
※GDライブラリやフィルターについてはこちらの記事を参照。
※画像の合成についてはこちらの記事を参照。
※また、サムネイル画像の再構成については、こちらの記事を参照してください。
※「JPEG」「PNG」「GIF」に対応
「JEPG形式」と「PNG形式」と「 GIF形式」に対応しています。
作成したコード内を参照。
- メモリ上にイメージ作成(jpeg/png/gif)
関数名：paka3_imagecreate($imgPath) - イメージをファイルに保存(jpeg/png/gif)
関数名：paka3_image($im,$imgPath)
今回の仕様について
今回は、テキストと画像の合成を実装させてみます。
- 前回のクラス構造をもとにカスタマイズ
※画像IDとテキストを入力できるようにする。 - 画像IDとテキストを入力しそれらを合成する
- フォントファイルを用意し、関数内で指定する。
※今回はIPAexフォントをつかいます。
ダウンロードしてプラグインファイルと同一フォルダ内に置く。 - テキストの位置や装飾などを設定
- 上書きor複製（新規作成）の処理をおこなう。
画面遷移について
メニューや大枠の流れは前回までの記事を参照してください。
合成元の画像のIDをひとつ、合成する文字列をひとつ入力します。
また「上書き」のチェックボックスを入れなければ画像が複製されます。
※前回同様は、説明をわかりやすくするためIDはテキスト入力にしています。ここは過去の記事等を参照してメディアアップローダ等を使うと良いと思います。
ボタンをクリックすると、画像と文字列が合成されサムネイル等の画像が再作成されます。
チェックを入れていなかったので新しい画像IDでファイルが複製されています。
確認する方法は
直接「メディア」を開いて確認しましょう。
画像IDの確認方法
メディア＞ライブラリから画像を選択すると以下のURLになります。
「post=****」というのが画像IDになります。
変換の確認はメディアからおこないます。
合成後、複製（コピー）する場合、一覧で確認するとこのようになります。
一覧
変換前
合成元（JPEG）
合成するテキスト
「アルパカ＠ラボ」
変換後（合成変換）
「画像&テキスト合成」のコードの流れを書いてみる
それでは、functions.phpやプラグインファイルに書いていきます。
今回のポイントは、前回のコードをもとに画像&テキスト合成の機能を追加するところです。
まず、Formに画像IDとテキストを入力→POST送信
入力部は省略します。POSTデータを受け取って、合成する関数に渡します。
//POSTデータの受け取りと変換
//合成元の画像のIDとパス
$_POST['imgID'] = esc_html($_POST['imgID']);
$imgID=$_POST['imgID'];
$imgPath = get_attached_file( $_POST['imgID']);
//文字列の登録
if($_POST['string'] && check_admin_referer('paka3reimage')){
$opt=array('text' => $_POST['string']);
//保存（次回も使えるように）
update_option('paka3_reimg', $opt);
}
//(条件処理と、上書きor複製処理：説明省略)...
//文字列を合成する関数
if($_POST['string']){
$str .= $this->imageMergeText($imgPath,$_POST['string']);
}
画像の複製（コピー）or上書きの処理
画像とテキストを合成する関数について
上記の流れから、画像とテキストを合成する関数に渡して、処理を実行します。
//######################
//テキスト合成
//######################
function imageMergeText($imgPath,$text=""){
//合成元
$im = $this->paka3_imagecreate($imgPath);
//フォントファイルの読み込み
$font = dirname(__FILE__).'/ipaexg.ttf';
//画像の色とアルファチャンネルの設定
$color= imagecolorallocatealpha($im, 255, 255, 255,30);
//imagettfbbox：テキストのサイズを取得
//フォントは40サイズ
$textBox = imagettfbbox(40, 0, $font, $text);
//幅と高さ（absは絶対値）
$textWidth = abs($textBox[4]-$textBox[6]);
$textHeight = abs($textBox[3]-$textBox[5]);
//(x,y)画面中央
$textX=(imagesx($im)-$textWidth)/2;
$textY=imagesy($im)/2;//-$textHeight;
if($im && imagettftext($im, 40, 0, $textX, $textY, $color, $font, $text)){
$str = '※変換が成功しました。
';
//保存
$this->paka3_image($im, $imgPath);
imagedestroy($im);
}else{
$str = '変換が失敗しました。
';
}
return $str;
}
- 合成元の画像の設定
メモリ上に「イメージを作成」し「配置場所の初期化」する - 合成するテキストのフォントを読み込む
※今回はIPAexフォントをつかいます。 - imagecolorallocatealphaでテキストの色とアルファチャンネルの設定
- imagettfbboxを使い、表示するテキストのサイズを取得し、画像に配置するx軸、y軸を計算する。
- imagettftextを使って画像とテキストを合成します。
- 成功すれば、画像をファイルに保存します。
そしてメモリ上にあるイメージを削除します。
合成処理後、サムネイル再作成。
//再作成
$metadata = wp_generate_attachment_metadata( $imgID , $imgPath );
if (!empty( $metadata ) && ! is_wp_error( $metadata ) ) {
wp_update_attachment_metadata( $imgID , $metadata );
}
更新したファイルor新しく作成したファイルに対してフィルター適用し、サムネイル画像などを再作成します。
コードをプラグイン用のファイルにします
それではfunction.phpに書いたコードを消して、
「Paka3ReImg.php」というファイルを作成し、以下のコードを記入します。
このファイルを[wp-content]>「plugins」ディレクトリに入れ、管理画面で有効にして完了です。
今回のまとめ
今回は、テキストと画像に合成しました。簡単に署名を入れるプラグインを作ってみたいのでこちらの内容はもう少し続きます。