Testing CodeIgniter Image Manipulation Class

CodeIgniter has a class called Image Manipulation Class. This class enables you to manipulate the followings.
* Image Resizing
* Thumbnail Creation
* Image Cropping
* Image Rotating
* Image Watermarking

I read an artticle at http://d.hatena.ne.jp/dix3/20081021/1224552638 and I translated its notes to English.
This will show you how to use Image Manipulation Class. It covers all the functions and some of preferences in the user guide.
I changed a font, image and some of details from the original article. All the credit goes to the author dix3.

Environment

I am using XAMPP for this and there is no .htaccess file. My application directory is the same level as system directory.

Font

I downloaded a free TTF font called Aller from http://www.fontsquirrel.com/. Unzip it and I saved the font in system/fonts directory.

Image

If you don’t have image directory, then create it as the same level as system and application. I call it img. Add a sample image called photo.png. The size is 700 x 466px, but it does not matter.

Controller

Create a file controlles/imglist.php and add the following code.
Please read explanations in the code.

<?php
class imglist extends Controller {
function index() {

  //Paths
  $base_url =  base_url().'/img/';
// This will show http://127.0.0.1/ci_day6_working_copy/img/.
// You define it in application/config.php
  $base_path = realpath('./img/');//This will show C:\xampp\htdocs\ci_day6_working_copy\img

  $src_name = 'photo.png';//source name
  $source_image = realpath($base_path.'/'.$src_name);//This will give C:\xampp\htdocs\ci_day6_working_copy\img\photo.png

  //Setting up values in an array
  $data['imgarr'][] = array('name'=>'<h3>Original image : 700 x 466 px </h3>' . $source_image , 'url' => $base_url.'/'.$src_name );

  //------------------------------
  // The first transformation. Reduce the size and create a thumbnail
  $w = 400;//width
  $h = 300;//height

  //config set-up
  // $config['image_library'] = 'imagemagick';//No need for gd2
  // $config['library_path'] = '/usr/bin/';//No need for gd2
  $config['source_image'] = $source_image;//Full path to the source image
  $config['create_thumb'] = TRUE;//create a thumbnail
  $config['thumb_marker'] = "_{$w}x{$h}_thumb";//thumbnail indicator. mypic.jpg would become mypic_thumb.jpg
  $config['width'] = $w;//width
  $config['height'] = $h;//height

  //loading image library
  $this->load->library('image_lib', $config);

  //Resizing the image
  $this->image_lib->resize();

  // Adding values in an array for display
  $new_image = realpath($base_path .'/'.basename($src_name,'.png') . $config['thumb_marker'] . '.png');
  //thie original is png, if you use jpg or gif you need to change this accordingly
  if($new_image){
    $data['imgarr'][] = array('name'=>'<h3>First transformation： Resize (400 x 300px)</h3> <br /> Image path: ' . $new_image , 'url' => $base_url.'/'. basename($new_image) );
  }

  //Unset config for the next one
  unset($config);
  $this->image_lib->clear();

  //-----------------------
  // The second transformation: Rotating the first image horizontally, 

  // Setting up config
  // $config['image_library'] = 'imagemagick';//No need for gd2
  // $config['library_path'] = '/usr/bin/';//No need for gd2
  $config['create_thumb'] = FALSE;//No thumbnail
  $config['source_image'] = $new_image;//full path for the source image
  $config['new_image'] = $base_path .'/'. basename($config['source_image'],'.png') .'_rotate.png' ;// Full path for the new image
  $config['rotation_angle'] = 'hor';// 

  //Initialize the new config
  $this->image_lib->initialize($config);

  //Rotate the image
  $this->image_lib->rotate();

  //Adding values in an array for display
  $new_image = realpath($config['new_image']);
  if($new_image){
    $data['imgarr'][] = array('name'=>'<h3>The second transformation: Rotating the first image horizontally </h3><br /> Image path:' . $new_image , 'url' => $base_url.'/'. basename($new_image) );
  }

  //Unset config for the next one
  unset($config);
  $this->image_lib->clear();

  //------------------------------
  //The third transformation: Cropping the second image
  // $config['image_library'] = 'imagemagick';//No need for gd2
  // $config['library_path'] = '/usr/bin/';//No need for gd2
  $config['create_thumb'] = FALSE;//No thumbnail
  $config['source_image'] = $new_image;//full path for the source image
  $config['new_image'] = $base_path .'/'. basename($config['source_image'],'.png') .'_crop.png' ;//Full path for the new image
  $config['x_axis'] = '100';
  $config['y_axis'] = '50';

  //Initialize the new config
  $this->image_lib->initialize($config);

  //Crop the image
  $this->image_lib->crop();

  //Adding values in an array for display
  $new_image = realpath($config['new_image']);
  if($new_image){
    $data['imgarr'][] = array('name'=>'<h3>The third transformation: Cropping the second image</h3>
     <p>x_axis:100px<br />
     y_axis:50px</p>' . $new_image , 'url' => $base_url.'/'. basename($new_image) );
  }

  //Unset config for the next one
  unset($config);
  $this->image_lib->clear();

  //------------------------------
  //The fourth transformation: Watermarking
  // $config['image_library'] = 'gd2';
  $config['create_thumb'] = FALSE;//No thumbnail
  $config['source_image'] = $new_image;//Full path to the source image
  $config['new_image'] = $base_path .'/'. basename($config['source_image'],'.png') .'_watermark.png' ;//Full path to the new image
  $config['wm_text'] = "WATER MARK YOUR LOGO";//Water mark text
  $config['wm_type'] = 'text';// Type of water mark
   $config['wm_font_path'] = realpath(BASEPATH.'fonts/Aller_Rg.ttf');//path to your font
  $config['wm_font_size'] = '20';//font size
  $config['wm_font_color'] = 'ffffff';//color
  $config['wm_vrt_alignment'] = 'bottom';//Sets the vertical alignment for the watermark image.
  $config['wm_hor_alignment'] = 'left';//Sets the horizontal allignment for the watermark image.
  $config['wm_vrt_offset'] = '-90';//vertical offset
  $config['wm_hor_offset'] = 'right';//horizontal offset

  //Initialize the new config
  $this->image_lib->initialize($config); 

  //Add watermarking
  $this->image_lib->watermark();

  //Adding values in an array for display
  $new_image = realpath($config['new_image']);

  if($new_image){
    $data['imgarr'][] = array('name'=>'<h3>The fourth transformation: Watermarking </h3>
    <p>Vertical allignment: bottom<br />
    Horizontal allignment: left<br />
    Vertical offset: -90<br />
    Horizontal offset: right</p>
    ' . $new_image , 'url' => $base_url.'/'. basename($new_image) );
  }

  //sending to view
  $this->load->view( "imgtest" , $data );

}
}

View

Save the following in view/imgtest.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<h2>CodeIgniter Image Manipulation Class Tests</h2>

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

</body>
</html>