WordPress

画像とテキストを合成してみる:【72日目】WordPress1日1プラグイン

更新日:

ようこそのお運びで、厚く御礼申し上げます。
72日目です。GDを使って色々していますが、今回は画像にテキストを合成してみようと思います。署名のプラグインを順を追って作ってみます。

画像とテキストを合成して、1枚の画像をメディアに追加する(上書きする)。

選択した画像にテキストを合成して、1枚の画像をWordPressの「メディア」ライブラリに追加します(新規と上書きは選択)。
140404-0001

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をひとつ合成する文字列をひとつ入力します。
また「上書き」のチェックボックスを入れなければ画像が複製されます。

140404-0004
前回同様は、説明をわかりやすくするためIDはテキスト入力にしていますここは過去の記事等を参照してメディアアップローダ等を使うと良いと思います。

ボタンをクリックすると、画像と文字列が合成されサムネイル等の画像が再作成されます。
チェックを入れていなかったので新しい画像IDでファイルが複製されています。
140404-0005

確認する方法は

直接「メディア」を開いて確認しましょう。

画像IDの確認方法
メディア>ライブラリから画像を選択すると以下のURLになります。140330-0005「post=****」というのが画像IDになります。

変換の確認はメディアからおこないます。
合成後、複製(コピー)する場合、一覧で確認するとこのようになります。
一覧
140404-0006

変換前
合成元(JPEG)
140404-0008

合成するテキスト
「アルパカ@ラボ」

変換後(合成変換)
140404-0007

「画像&テキスト合成」のコードの流れを書いてみる

それでは、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;
}
  1. 合成元の画像の設定
    メモリ上に「イメージを作成」し「配置場所の初期化」する
  2. 合成するテキストのフォントを読み込む
    ※今回はIPAexフォントをつかいます。
  3. imagecolorallocatealphaでテキストの色とアルファチャンネルの設定
  4. imagettfbboxを使い、表示するテキストのサイズを取得し、画像に配置するx軸、y軸を計算する。
  5. imagettftextを使って画像とテキストを合成します。
  6. 成功すれば、画像をファイルに保存します。
    そしてメモリ上にあるイメージを削除します。

合成処理後、サムネイル再作成。

前回と同じ機能です。

//再作成
$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」ディレクトリに入れ、管理画面で有効にして完了です。

今回のまとめ

今回は、テキストと画像に合成しました。簡単に署名を入れるプラグインを作ってみたいのでこちらの内容はもう少し続きます。

-WordPress
-, , , ,

Copyright© アルパカ@ラボ:大分県臼杵市でホームページ運営やWordPressやってます。 , 2019 All Rights Reserved Powered by AFFINGER5.