CodeIgniterの学習 28 - 画像のリサイズ、回転、切り取り、文字合成を試してみる

今日はCodeIgniter標準の画像操作クラスを使って、
画像のリサイズ(resize),回転(rotate),切り取り(crop),合成(watermark)を試してみる。

サーバサイドだけでの簡単な画像操作ならば、これでも使えなくはない。
標準機能としてはまあ良いんじゃないかと思った。


変換元ネタ画像

適切な画像がなかったので、頑張って描いてみた。
サイズは800px x 600px

亀の絵のつもり。

サンプルコード

マニュアルを見ながらべた書きで試してみた。生成実験なので例外処理とか全然入れてない。

詳細は、マニュアルとかコメントを参照してね。



1)コントローラ内抜粋:
生成部分のみ貼っておく。フォントは既に設置済み。

./application/controllers/tasklist.php

<?php
 //画像変換テスト、実験のためべた書き、例外処理も無し
function imgtest(){

  //画像のベースパスとか
  $base_url = '/img/';//urlのベース
  $base_path = realpath('./img/');//サーバ上のフルパス

  $src_name = 'kame.png';//元ネタ画像名
  $source_image = realpath($base_path.'/'.$src_name);//元ネタ画像のサーバ上のフルパス _pathじゃなくて_imageってのは、ライブラリ側に寄せているから

  //画面表示用に値をセット
  $data['imgarr'][] = array('name'=>'元ネタ : ' . $source_image , 'url' => $base_url.'/'.$src_name );


  //------------------------------
  //変換1枚目:縮小しつつ、サムネイルを生成
  $w = 400;//幅
  $h = 300;//高さ

  //画像変換設定
  $config['image_library'] = 'imagemagick';//gd2なら指定不要
  $config['library_path'] = '/usr/bin/';//gd2なら指定不要
  $config['source_image'] = $source_image;//元ネタフルパス
  $config['create_thumb'] = TRUE;//サムネイルを作る
  $config['thumb_marker'] = "_{$w}x{$h}_thumb";//サムネイルのprefix
  $config['width'] = $w;//幅
  $config['height'] = $h;//高さ

  //画像ライブラリの読み込み
  $this->load->library('image_lib', $config);
  
  //リサイズ実行
  $this->image_lib->resize();//本当はここでtrue,false判定が必要

  //画面表示用に値をセット
  $new_image = realpath($base_path .'/'.basename($src_name,'.png') . $config['thumb_marker'] . '.png');
  if($new_image){
    $data['imgarr'][] = array('name'=>'変換1枚目:縮小 : ' . $new_image , 'url' => $base_url.'/'. basename($new_image) );
  }

  //コンフィグのリセット
  unset($config);
  $this->image_lib->clear();


  //----------------------------------------------------------------------
  //変換2枚目:1枚目を水平反転し、新規ファイルを作成(サムネイルではない)

  //画像変換設定
  $config['image_library'] = 'imagemagick';//gd2なら指定不要
  $config['library_path'] = '/usr/bin/';//gd2なら指定不要
  $config['create_thumb'] = FALSE;//サムネイルは作らない
  $config['source_image'] = $new_image;//元ネタフルパス
  $config['new_image'] = $base_path .'/'. basename($config['source_image'],'.png') .'_rotate.png' ;//変換後フルパス
  $config['rotation_angle'] = 'hor';//水平反転


  //画像ライブラリの初期化
  $this->image_lib->initialize($config);

  //回転実行
  $this->image_lib->rotate();//本当はここでtrue,false判定が必要

  //画面表示用に値をセット
  $new_image = realpath($config['new_image']);
  if($new_image){
    $data['imgarr'][] = array('name'=>'変換2枚目:1枚目をさらに回転 : ' . $new_image , 'url' => $base_url.'/'. basename($new_image) );
  }


  //コンフィグのリセット
  unset($config);
  $this->image_lib->clear();

  //------------------------------
  //変換3枚目:2枚目を切り抜いて、新規ファイルを作成(サムネイルではない)
  $config['image_library'] = 'imagemagick';//gd2なら指定不要
  $config['library_path'] = '/usr/bin/';//gd2なら指定不要
  $config['create_thumb'] = FALSE;//サムネイルは作らない
  $config['source_image'] = $new_image;//元ネタフルパス
  $config['new_image'] = $base_path .'/'. basename($config['source_image'],'.png') .'_crop.png' ;//変換後フルパス
  $config['x_axis'] = '100';
  $config['y_axis'] = '50';

  //画像ライブラリの初期化
  $this->image_lib->initialize($config);

  //切り抜き実行
  $this->image_lib->crop();//本当はここでtrue,false判定が必要

  //画面表示用に値をセット
  $new_image = realpath($config['new_image']);
  if($new_image){
    $data['imgarr'][] = array('name'=>'変換3枚目:2枚目をさらに切り抜き(x軸100px,y軸50px以降のみ残す : ' . $new_image , 'url' => $base_url.'/'. basename($new_image) );
  }


  //コンフィグのリセット
  unset($config);
  $this->image_lib->clear();

  //------------------------------
  //変換4枚目:3枚目に文字列を挿入して、新規ファイルを作成(サムネイルではない)
  $config['image_library'] = 'gd2';
  $config['create_thumb'] = FALSE;//サムネイルは作らない
  $config['source_image'] = $new_image;//元ネタフルパス
  $config['new_image'] = $base_path .'/'. basename($config['source_image'],'.png') .'_watermark.png' ;//変換後フルパス
  $config['wm_text'] = "ヌル画伯作\n定価¥1,000億万円\n開始価格¥10円";//挿入文字列
  $config['wm_type'] = 'text';//合成タイプ
  $config['wm_font_path'] = realpath(BASEPATH.'fonts/sazanami-gothic.ttf');//フォント、既に設置済み
  $config['wm_font_size'] = '25';//フォントサイズ
  $config['wm_font_color'] = 'ff4500';//色
  $config['wm_vrt_alignment'] = 'bottom';//縦位置
  $config['wm_hor_alignment'] = 'left';//横位置
  $config['wm_vrt_offset'] = '-90';//縦位置のオフセット
  $config['wm_hor_offset'] = '10';//横位置のオフセット

  //画像ライブラリの初期化
  $this->image_lib->initialize($config); 

  //合成実行
  $this->image_lib->watermark();//本当はここでtrue,false判定が必要

  //画面表示用に値をセット
  $new_image = realpath($config['new_image']);

  if($new_image){
    $data['imgarr'][] = array('name'=>'変換4枚目:変換4枚目:3枚目に文字列を挿入 : ' . $new_image , 'url' => $base_url.'/'. basename($new_image) );
  }


  // ビューの生成
  $this -> _setTpl( "tasklist_imgtest" , $data );

}
 ?>


中身ビュー:
./application/views/tasklist_imgtest.php

<h2>画像変換テスト</h2>

<dl>
<?php foreach($imgarr as $k => $v){ ?>
	<dt><?=$v['name'];?></dt>
	<dd><img src="<?=$v['url'];?>" alt="<?=$v['url'];?>"></dd>
<?php }?>
</dl>

外枠ビューとかcssとかは省略

生成された画像

まず400pxx300pxに縮小し、その後水平方向に反転した。

うり二つだ。


さらに一部を切り出し、文字を重ね合わせてみた。


パラメータ設定だけちゃんとすれば、呼び出し一発で変換出来るのでそこそこ便利。


dix3はがぞうへんかんまじゅつをてにいれた!