画像に署名を入れるプラグインを作ってみた:【73日目】WordPress1日1プラグイン


Warning: Use of undefined constant width - assumed 'width' (this will throw an Error in a future version of PHP) in /home/en3/paka3.net/public_html/wp-content/plugins/paka3_shortCodePostLinks/paka3_shortCodePostLinks.php on line 63

Warning: Use of undefined constant width - assumed 'width' (this will throw an Error in a future version of PHP) in /home/en3/paka3.net/public_html/wp-content/plugins/paka3_shortCodePostLinks/paka3_shortCodePostLinks.php on line 63

Warning: Use of undefined constant width - assumed 'width' (this will throw an Error in a future version of PHP) in /home/en3/paka3.net/public_html/wp-content/plugins/paka3_shortCodePostLinks/paka3_shortCodePostLinks.php on line 63

Warning: Use of undefined constant width - assumed 'width' (this will throw an Error in a future version of PHP) in /home/en3/paka3.net/public_html/wp-content/plugins/paka3_shortCodePostLinks/paka3_shortCodePostLinks.php on line 63

Warning: Use of undefined constant width - assumed 'width' (this will throw an Error in a future version of PHP) in /home/en3/paka3.net/public_html/wp-content/plugins/paka3_shortCodePostLinks/paka3_shortCodePostLinks.php on line 63

Warning: Use of undefined constant width - assumed 'width' (this will throw an Error in a future version of PHP) in /home/en3/paka3.net/public_html/wp-content/plugins/paka3_shortCodePostLinks/paka3_shortCodePostLinks.php on line 63

Warning: Use of undefined constant width - assumed 'width' (this will throw an Error in a future version of PHP) in /home/en3/paka3.net/public_html/wp-content/plugins/paka3_shortCodePostLinks/paka3_shortCodePostLinks.php on line 63

ようこそのお運びで、厚く御礼申し上げます。
73日目です。今回はGDを使ったプラグインを作ってきたまとめです。
画像に署名を入れる」プラグインを作って見ました。

複数の画像に署名(テキスト)を合成するプラグインを作成。

メディアアップローダを利用して選択した画像に、署名(テキスト)を合成する(新規と上書きは選択)。その際、テキストの色やサイズは変更できるようにする。

今回はGitHubにも公開しています。
140406-0008

今回の仕様について

今回はコードの説明は省略します。構成は大枠前回と同じです。
使い勝手の部分を強化してみました。画面遷移を確認してください。

画面遷移について

「設定」メニューの下「paka3画像署名」というメニューから開きます。

署名(テキスト)に「合成するテキスト」、「合成する画像を選択」から画像を選択します
また「上書き」のチェックボックスを入れなければ、標準画像が複製されます。

140406-0001

文字の装飾について、「文字のサイズ」と「文字の配置場所」、「文字の色」、「文字の透明度」をそれぞれ選択します。
140406-0002
文字の色は「カラーピッカー(JSColorhttp://jscolor.com/」を使用。
※スクリプトを読込、IDを設定すれば良いので簡単に組み込めました。

合成する画像を選択」をクリックすると、メディアアップローダが開きます。
こちらから、画像を選択します(複数選択可能)
140406-0005

選択したら、以下のように「選択した画像」リストが表示されます。
選択を解除する場合は「削除する」をクリックしてください。
140406-0004
署名を合成する」ボタンをクリックすると、画像と文字列が合成されサムネイル等の画像が再作成されます。
140406-0006

確認する方法は

作成したときのサムネイルをクリックすると、「メディア」を開きますので確認してみましょう。または直接「メディア」を開いてみましょう

合成後、複製(コピー)する場合、一覧で確認するとこのようになります。
一覧
140404-0006

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

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

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

コードの説明は省略

今回はコードの説明は省略します。構成は大枠前回と同じです。


Githubに公開しています

※コードはgithubに置いてますのでご自由にご覧くださいませ。
https://github.com/snoise/Paka3Reimg

※GDや画像の合成・再作成については前回の記事を参照。

GDライブラリフィルターについてはこちらの記事を参照。

※テキストの合成についてはこちらの記事を参照。

※画像の合成についてはこちらの記事を参照。

※また、サムネイル画像の再構成については、こちらの記事を参照してください。

※メディアアップローダの導入方法について

※「JPEG」「PNG」「GIF」に対応

「JEPG形式」と「PNG形式」と「 GIF形式」に対応しています。
作成したコード内を参照。

  • メモリ上にイメージ作成(jpeg/png/gif)
    関数名:paka3_imagecreate($imgPath)
  • イメージをファイルに保存(jpeg/png/gif)
    関数名:paka3_image($im,$imgPath)

これからできそうなこと。

Ajaxにしたりとか、フォント数を増やしたり、画像バージョンを作ったり・・・。
もうちょっとビジュアル的にするとか色々できそうです。

今回のまとめ

今回は今までのGDライブラリを使ったコードをまとめてみました。
色々、多機能にした方が良いのかなとも思ったのですが、やっぱりシンプルに仕上げる方が用途がわかりやすいですね。GDはとりあえず今回でひとまず終わりにしときます。

wordpress1日1プラグイン

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です