Today I will explain how to crop the image using jquery and CodeIgniter framework.
For this, I used imageareaselect.js jquery plugin and imgareaselect-default.css files.If you are creating crop image functionality for profile pic updates and your application is getting high traffic , you need to take good Virtual Private Servers, Built for Open Source Developers, Fully managed, lightning-fast, starting at $15/mo with 1GB RAM!, a developer running a complex application that requires instant scalability, or a designer wanting to give your clients’ sites maximum performance, then VPS hosting is just what you need!

Now I will create a view to upload the image using frontend request,for this I created a view file named cropimage.php

<html>
<head>
<title>Image crop with jquery</title>
</head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/imgareaselect-default.css" />
<script type="text/javascript" src="<?php echo base_url();?>scripts/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function getSizes(im,obj)
	{
		var x_axis = obj.x1;
		var x2_axis = obj.x2;
		var y_axis = obj.y1;
		var y2_axis = obj.y2;
		var thumb_width = obj.width;
		var thumb_height = obj.height;
                var img =$("#image_name").val();
		if(thumb_width > 0)
			{
				if(confirm("Do you want to save image..!"))
					{
						$.post('<?php echo base_url();?>welcome/updatecropimage/',
                                                  {
                                                   x_axis : x_axis,
                                                   y_axis : y_axis,
                                                   thumb_width:thumb_width,
                                                   thumb_height:thumb_height,
                                                   img :img
                                                  },
                                                  function(data)
						  {
                                                     // alert(data);
						    $("#cropimage").show();
						    //$("#thumbs").html("");
						    $("#thumbs").html("<img src='<?php echo base_url();?>uploads/"+data+"' />");
						  });

	                               }
                         }
                         }

$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: getSizes
    });
});
</script>
<style>
.cropimage
{
 background-color: aquamarine;
 alignment-adjust: central;
}
.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{
	position: relative;
	padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
	border-radius: 10px;
	font-family: 'Pacifico', cursive;
	font-size: 14px;
	color: #FFF;
	text-decoration: none;	
}


.red
{
	background-color: #E74C3C;
	border-bottom: 5px solid #BD3E31;
	text-shadow: 0px -2px #BD3E31;
}


.action-button:active
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}
.yellow
{
	background-color: #F2CF66;
	border-bottom: 5px solid #D1B358;
	text-shadow: 0px -2px #D1B358;
        float: left;
}
</style>
<div class="cropimage">
    <h1>eKnowledgetree Programming Blog - For More Knowledge Please Visit @ <a href="https://www.eknowledgetree.com/" background-color="red">  
    eKnowledgeTree</a></h1>  
</div>
 <?php echo form_open_multipart('welcome/cropimage');?>
<div id="cropimage"  class="cropimage">
 <table width="958">
 
  <tr>
      <td><h1>Image Upload</h1></td>
      <td><input type="file" name="userfile" name="userfile"></td>
   
    <td><input type="hidden" name="image_name" id="image_name" value="<?php echo $img; ?>" ></td>
   </tr>
  <br>
   <tr>
    <td>
    <td><input type="submit" value="Submit" class="action-button shadow animate red"/></td>
  </tr>
 </table>
<div style="margin:0 auto; width:600px">
    <h1>Please drag on the image</h1>
    <img src='<?php echo base_url();?>uploads/<?php echo $img; ?>' id="photo" style='max-width:500px' >

</div>
</div>
<div id="thumbs" style='max-width:500px'></div>
<?php echo form_close();?>

When user send the file upload request to controller function crop image()
This request will call model function to upload a file using codeigniter default library upload.

Now create controller name as welcome.php

 

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -  
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in 
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see http://codeigniter.com/user_guide/general/urls.html
	 */
        public $data;
 	public function __construct()
	{//Core controller constructor
	    parent::__construct();
	    $this->load->model('ektreemodel');
               
				
	}
	public function index()
	{
                $data['img']='Tulips.jpg';
		$this->load->view('demos/imagecrop',$data);
	}
        public function cropimage()
        {
        $res['img']=$this->ektreemodel->upload_image();
        $this->load->view("demos/imagecrop",$res);

		
        }
        public function updatecropimage()
        {
           // echo $x=$this->input->post('x_axis');
            $img['imgpath']=$this->ektreemodel->upload_thumbnail();
            echo $img=$img['imgpath'];
        }
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */

Now we will look up model functions to upload image file to uploads folder and saving file name to database.

Now create model name as ektreemodel.php

<?php
class Ektreemodel extends CI_Model
{
  
        /**
	* file upload method
	* @access	public
	**/
	
       public function upload_image()
       {
                           $config['upload_path']='./uploads/';
			   $config['allowed_types']='gif|jpg|png|jpeg';
			   $config['max_size']='2024';
			   $config['max_width']='2024';
			   $config['max_height']='1024';
			   $this->load->library('upload',$config);
			   if(!$this->upload->do_upload())
			   {
			     $error=array('error'=>$this->upload->display_errors());
			     return 0;
				 
			   }
			   else
			   {
		             $data=$this->upload->data();
                             $filename=$data['file_name'];
                             $user=1;
                             $result= array('imagepath' =>$filename);
                             $this->db->where('user_id', $user);
                             $insertstatus=$this->db->update("users",$result);
                             return $filename;            
			   }
                
       }
       public function upload_thumbnail()
       {
                          $this->load->helper('string');
                          $rand = random_string('alnum',4);
                          $w=$this->input->post('thumb_width');
                          $h=$this->input->post('thumb_height');
                          $x1=$this->input->post('x_axis');
                          $y1=$this->input->post('y_axis');
                          $img=$this->input->post('img');
			  $new_name = "small".$rand.".jpg"; // Thumbnail image name
                          $path = "./uploads/";
                          list($joe, $alto) = getimagesize($path.$img);
                            $ratio = $joe / 500;
                            $x1 = ceil($x1 * $ratio);
                            $y1 = ceil($y1 * $ratio);
                            $wd = ceil($w * $ratio);
                            $ht = ceil($h * $ratio);
                            $nw = 100;// Maximum thumbnail width
                            $nh = 100;//Maximum thumbnail height
                            $nimg = imagecreatetruecolor($nw,$nh);
                            $im_src = imagecreatefromjpeg($path.$img);
                            imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$wd,$ht);
                            imagejpeg($nimg,$path.$new_name,90);
		             $user=1;
                             $result= array('imagepath' =>$new_name);
                             $this->db->where('user_id', $user);
                             $insertstatus=$this->db->update("users",$result);
		             return $new_name;
       }
    
    
    
    
    
}
?>

In the above code, I used a upload thumbnail () function to create crop image into uploads folder and save it to the database.
Here to create thumbnail I had taken selected image x-axis, y-axis, height and width of the selected image areas dimensions.

Thanks for reading this article.

To Download Crop Image Functionality Please add blow details

[sdm_download id=”73″ fancy=”0″][sdm_download_counter id=”73″]