ようこそのお運びで、厚く御礼申し上げます。
88日目です。今回は画像をアップロードするときに「画像の処理」をかけてみるということをしてみます。
メディアで画像をアップロードするときに、画像処理をかけてみる。
今回は、アップロード時に処理を行うサンプルです。
アップロード時に「フィルター」をかけたり、「wp_image_editer」をつかったり、「画像圧縮処理」をしたり等々、今後使う上でのサンプルコードになるといいかなとおもいます。
※いろいろ試してみたいのですが、あくまで「サーバ環境はあたらない」が前提です。
今回の仕様について
このアップロード時処理をする方法は二つ方法があります。
- 一つ目が今回の
「メイン画像、サムネイル画像等すべてに一つ一つフィルターをかける方法」
- 二つ目は
「メイン画像にフィルターをかけて、その画像をもとにサムネイル画像などの構成をかける方法」
※２はサムネイル画像等には直接フィルターをかけない。
今回は、１の「メイン画像、サムネイル画像等すべてに一つ一つフィルターをかける方法」をしてみます
後はサンプルとして以下の条件を作ります
- 今回はjpegのみに処理をかけてみる
- 白黒フィルターをかける
画面の遷移について
今回は画像のアップロード時に処理を行うので、「メディアを追加」などから画像をアップロードします。
今回アップロードする画像はこちら
アップロードされると、対象の画像はサムネイルを含め「白黒」になっています。
プラグインファイルを作成していきます。
「wp-contents>plugins」ディレクトリに「paka3_upload_img」ディレクトリを作成し、「paka3_upload_img.phpを作成します。
※今回は、functions.phpにかいてもどちらでもかまいません。
wp_generate_attachment_metadataをフィルターフックします。
今回はアップロード時に、サムネイル等を構成する「wp_generate_attachment_metadata」をフックします。
WordPress Codex : wp_generate_attachment_metadata
クラスを構成してみよう
クラス構成は、wp_generate_attachment_metadataをフックする形で以下のようにしてみます。
$a = new PakaUploadImg ;
class PakaUploadImg{
function __construct(){
require_once( ABSPATH . 'wp-admin/includes/image.php' );
add_filter( "wp_generate_attachment_metadata" , array( $this , "paka3_img_meta" ),10 ,2 );
}
function paka3_img_meta($metadata, $imgID){
//＊ここに処理を書く
return $metadata ;
}
}
※上記には記述していますが、wp_generate_attachment_metadataが動かない場合は、「wp-admin/includes/image.php」を読み込んでください。動く場合はこの記述はいりません。
追加処理をする関数「paka3_img_meta」
ここでなにをしているかというと、$imgID:画像IDと、画像を構成する情報:$metadataをもとに、画像を再構成しています。
function paka3_img_meta($metadata, $imgID){
//画像のファイルパス
$imgPath = get_attached_file( $imgID );
//画像の種類
$mime_type = get_post_mime_type( $imgID );
//ここで、条件を[jpgのみとかファイル名にhoge_がついているとか]
if( $mime_type == 'image/jpeg' ){
//1.メイン画像を処理及び保存
//2.サムネイル等の画像を処理及び保存
}
return $metadata;
}
}
今回はGDを使って画像処理をしています。
WordPressにはwp_image_editerという画像処理の関数がありますが、今回はphpの画像処理のGDライブラリを直接利用しています。
参考２：WordPress Codex:wp_image_editer（GDとimagemagicをまとめたWordPressの画像処理関数）
※GDを使った処理のポイント
これは余談なので、飛ばしてもかまいません。GD処理は
- イメージの作成：imagecreatefrom***など
- 画像処理（フィルター・リサイズ等）
- 画像の保存：image***
- イメージの削除：imagedestroy
という流れが基本となります。使うことはあまりありませんが頭に入れておきましょう。
メイン画像の処理をおこなう
GDを使った処理の流れをもとにコードを作成します。
//*ここで画像処理をする //メインファイル変換 $im = $this->paka3_imagecreate( $imgPath ); //フィルター $im = $this->imageGdfunc($im); //メインファイル保存 $res = $this->paka3_image($im,$imgPath); imagedestroy($im);
今回はイメージの作成（paka3_imagecreate）やフィルター（imageGdfunc）、画像の保存（paka3_image）についての説明は省略します。
ソースコードに記述していますので、そちらを参照してください
その他の画像を$metadataをもとに処理を行う。
$metadataには以下のような配列がはいっています。
今回は$metadata[sizes]のデータを使って、サムネイル画像等にフィルターをかけました。
Array
(
[width] => 200
[height] => 200
[file] => 2014/07/paka.jpg
[sizes] => Array
(
[thumbnail] => Array
(
[file] => paka-150x150.jpg
[width] => 150
[height] => 150
[mime-type] => image/jpeg
)
[post-thumbnail] => Array
(
[file] => paka-190x190.jpg
[width] => 190
[height] => 190
[mime-type] => image/jpeg
)
)
なので、$metadata['sizes']のデータをもとに、画像に処理を行っていきます。
foreach ( $metadata['sizes'] as $akey => $aval) {
//サブファイル名を取得
$sub_imgPath = dirname($imgPath).'/'.$aval[ 'file' ];
//ここで画像処理をする
//サブメインファイル変換
$sub_im = $this->paka3_imagecreate( $sub_imgPath );
//フィルター
$sub_im = $this->imageGdfunc( $sub_im );
//メインファイル保存
$res = $this->paka3_image($sub_im,$sub_imgPath );
imagedestroy( $sub_im );
}
上記のポイントと流れは同じです。
コードを作成し、プラグインを有効にしてみる
今回のコードは以下のようになります。
プラグインを有効化して、画像をアップロードしてみてください。
今回のまとめ
画像処理については、phpのライブラリを使ったり、ASPの変換サービスも増えているので、効率の良いが画像処理を書いてみるのもおもしろいかもしれません。ちなみにwebpのGDライブラリはphp5.5から使えるみたいです。