WordPress

画像をアップロードする時に、画像処理（フィルター）をかけてみる。(wp_generate_attachment_metadata):【88日目】WordPress1日１プラグイン

更新日：

ようこそのお運びで、厚く御礼申し上げます。
88日目です。今回は画像をアップロードするときに「画像の処理」をかけてみるということをしてみます。

メディアで画像をアップロードするときに、画像処理をかけてみる。

今回は、アップロード時に処理を行うサンプルです。
アップロード時に「フィルター」をかけたり、「wp_image_editer」をつかったり、「画像圧縮処理」をしたり等々、今後使う上でのサンプルコードになるといいかなとおもいます。

※いろいろ試してみたいのですが、あくまで「サーバ環境はあたらない」が前提です。

今回の仕様について

このアップロード時処理をする方法は二つ方法があります。

今回は、１の「メイン画像、サムネイル画像等すべてに一つ一つフィルターをかける方法」をしてみます
後はサンプルとして以下の条件を作ります

  • 今回はjpegのみに処理をかけてみる
  • 白黒フィルターをかける

画面の遷移について

今回は画像のアップロード時に処理を行うので、「メディアを追加」などから画像をアップロードします。
今回アップロードする画像はこちら
paka

アップロードされると、対象の画像はサムネイルを含め「白黒」になっています。

140708-0003

 

プラグインファイルを作成していきます。

「wp-contents>plugins」ディレクトリに「paka3_upload_img」ディレクトリを作成し、「paka3_upload_img.phpを作成します。
140708-0001

コード全体を見たい方は、先にこちらからどうぞ。

※今回は、functions.phpにかいてもどちらでもかまいません。

wp_generate_attachment_metadataをフィルターフックします。

今回はアップロード時に、サムネイル等を構成する「wp_generate_attachment_metadata」をフックします。

WordPress Codex : wp_generate_attachment_metadata

クラスを構成してみよう

クラス構成は、wp_generate_attachment_metadataをフックする形で以下のようにしてみます。

001
002
003
004
005
006
007
008
009
010
011
012
013
$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をもとに、画像を再構成しています。

001
002
003
004
005
006
007
008
009
010
011
012
013
014
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ライブラリを直接利用しています。

参考１：php:画像処理：GD

参考２：WordPress Codex:wp_image_editer（GDとimagemagicをまとめたWordPressの画像処理関数）

※GDを使った処理のポイント

これは余談なので、飛ばしてもかまいません。GD処理は

  1. イメージの作成：imagecreatefrom***など
  2. 画像処理（フィルター・リサイズ等）
  3. 画像の保存：image***
  4. イメージの削除：imagedestroy

という流れが基本となります。使うことはあまりありませんが頭に入れておきましょう。

メイン画像の処理をおこなう

GDを使った処理の流れをもとにコードを作成します。

001
002
003
004
005
006
007
008
//*ここで画像処理をする
//メインファイル変換
$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]のデータを使って、サムネイル画像等にフィルターをかけました。

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
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']のデータをもとに、画像に処理を行っていきます。

001
002
003
004
005
006
007
008
009
010
011
012
013
014
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
/*
Plugin Name: PakaUploadImg
Plugin URI: http://www.paka3.com/wpplugin
Description: 画像をアップロード時に、画像の処理をする
Author: Shoji ENDO
Version: 0.1
Author URI:http://www.paka3.com/
*/
$a = new Paka3UploadImg ;
class Paka3UploadImg{
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){
$imgPath = get_attached_file( $imgID );
$mime_type = get_post_mime_type( $imgID );
//ここで、条件を[jpgのみとかファイル名にhoge_がついているとか]
if( $mime_type == 'image/jpeg' ){
//*ここで画像処理をする
//メインファイル変換
$im = $this->paka3_imagecreate( $imgPath );
//フィルター
$im = $this->imageGdfunc($im);
//メインファイル保存
$res = $this->paka3_image($im,$imgPath);
imagedestroy($im);
//print_r( $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 );
}
}
return $metadata ;
}
//######################
//GDのフィルターを使ってみる
//######################
private function imageGdfunc($im){
if($im && imagefilter($im, IMG_FILTER_GRAYSCALE)){
//$str = '※変換が成功しました。';
return $im;
}else{
//$str = '変換が失敗しました。';
return false;
}
}
//######################
//画像のイメージ作成(jpeg/png/gif)
//######################
private function paka3_imagecreate( $imgPath ){
$mime = wp_check_filetype(basename( $imgPath ), null );
if( $mime['type'] == "image/jpeg"){
$im = imagecreatefromjpeg( $imgPath );
}elseif( $mime['type'] == "image/png" ) {
$im = imagecreatefrompng( $imgPath );
}elseif( $mime['type'] == "image/gif" ) {
$im = imagecreatefromgif( $imgPath );
} else {
$im = false;
}
return $im;
}
//######################
//画像の保存
//######################
private function paka3_image( $im , $imgPath ){
$mime = wp_check_filetype( basename( $imgPath ), null );
if($mime['type'] == "image/jpeg"){
imagejpeg($im, $imgPath);
}elseif($mime['type'] == "image/png"){
imagepng($im, $imgPath);
}elseif($mime['type'] == "image/gif"){
imagegif($im, $imgPath);
}else{
return false;
}
}
}
view raw paka3_upload_img.php hosted with ❤ by GitHub

プラグインを有効化して、画像をアップロードしてみてください。140708-0002

今回のまとめ

画像処理については、phpのライブラリを使ったり、ASPの変換サービスも増えているので、効率の良いが画像処理を書いてみるのもおもしろいかもしれません。ちなみにwebpのGDライブラリはphp5.5から使えるみたいです。

-WordPress
-, , , ,

S