CodeIgniter Image Manipulation Demo:

This small demo will show you how the codeigniter image manipulation tutorial would work in real time implementation. Here in this example demo, you will be able to upload a single image file at a time with file type restricted to gif,jpg,png and jpeg . After the image uploaded successfully, you should be able to see the details of the uploaded image that codeigniter preserve in its internal variable and see how the image process makes effect on the original image, side by side. You can choose the specific mode with which you want the image to be processed. Cheers.

Visit The CodeIgniter Image Manipulation Tutorial

Select File To Upload:


  Crop   Resize   Rotate   Water Mark



Note: In case you are having same effect over and over(could be an caching issue), try to use a different image.

Controller Function Code:
   
     /**
     * demo for image manipulation with codeigniter tutorial on codesamplez.com
     */
    public function image_demo()
    {
        try
        {
            if($this->input->post("submit")){        
                $this->load->library("app/uploader");
                $config = $this->config->item("rules");
                $this->uploader->do_upload($config["image"]);
                
                $image_data                          =   $this->upload->data();
                $config["manipulation"]['source_image']      =   $image_data['full_path'];
                $this->load->library('image_lib', $config["manipulation"]); 
                
                
                switch($this->input->post("mode"))
                {
                    case "crop":
                        $this->image_lib->crop();
                        break;
                    case "resize":
                        $this->image_lib->resize();
                        break;
                    case "rotate":
                        $config["manipulation"]['rotation_angle'] = '90';
                        $this->image_lib->initialize($config["manipulation"]); 
                        $this->image_lib->rotate();
                        break;
                    case "watermark":
                        $config["manipulation"]['wm_text'] = 'Copyright 2013 - CodeSamplez.com';
                        $config["manipulation"]['wm_type'] = 'text';
                        $this->image_lib->initialize($config["manipulation"]); 
                        $this->image_lib->watermark();    
                }
            }
            return $this->view();
        }
        catch(Exception $err)
        {
            log_message("error",$err->getMessage());
            return show_error($err->getMessage());
        }
    }
       
Smarty Template View Code:
   
    <form action="" method="POST" enctype="multipart/form-data" >
        Select File To Upload:<br />
        <input type="file" name="userfile" multiple="multiple"  />
        <br /><br />
        <label>Select Mode:</label>        
        <input type="radio" name="mode" value="crop" checked="checked" />   Crop
        <input type="radio" name="mode" value="resize" />   Resize
        <input type="radio" name="mode" value="rotate" />   Rotate
        <input type="radio" name="mode" value="watermark" />   Water Mark
        <br /><br />
        <input type="submit" name="submit" value="Upload" class="btn btn-success" />
    </form>

{if isset($uploaded_file)}
    
    <div class="row">
        <div class="span6">
            Original Image: >img src="{$base_url}/images/{$uploaded_file.client_name}" />
        </div>
        <div class="span6">
            Processed Image: >img src="{$base_url}/images/{$uploaded_file.raw_name}_thumb{$uploaded_file.file_ext}" />
        </div>
    </div>
        <h2>File Details:>/h2>
    {foreach from=$uploaded_file key=name item=value}
        {$name} : {$value}
        <br />
    {/foreach}    
{/if} 
       
our application's 'uploader' library Code is exactly same as the one shown on codeigniter file upload demo.