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

<title>Image crop with jquery</title>
<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,
                                                   img :img
                                                     // alert(data);
						    $("#thumbs").html("<img src='<?php echo base_url();?>uploads/"+data+"' />");


$(document).ready(function () {
        aspectRatio: '1:1',
        onSelectEnd: getSizes
 background-color: aquamarine;
 alignment-adjust: central;
	transition: all 0.1s;
	-webkit-transition: all 0.1s;

	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;	

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

	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
	background-color: #F2CF66;
	border-bottom: 5px solid #D1B358;
	text-shadow: 0px -2px #D1B358;
        float: left;
<div class="cropimage">
    <h1>eKnowledgetree Programming Blog - For More Knowledge Please Visit @ <a href="" background-color="red">  
 <?php echo form_open_multipart('welcome/cropimage');?>
<div id="cropimage"  class="cropimage">
 <table width="958">
      <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>
    <td><input type="submit" value="Submit" class="action-button shadow animate red"/></td>
<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 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
	 *	- or -  
	 *	- or -
	 * Since this controller is set as the default controller in 
	 * config/routes.php, it's displayed at
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see
        public $data;
 	public function __construct()
	{//Core controller constructor
	public function index()
        public function cropimage()

        public function updatecropimage()
           // echo $x=$this->input->post('x_axis');
            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

class Ektreemodel extends CI_Model
	* file upload method
	* @access	public
       public function upload_image()
			     return 0;
                             $result= array('imagepath' =>$filename);
                             $this->db->where('user_id', $user);
                             return $filename;            
       public function upload_thumbnail()
                          $rand = random_string('alnum',4);
			  $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);
                             $result= array('imagepath' =>$new_name);
                             $this->db->where('user_id', $user);
		             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″]