title: Crop and Upload image in Codeigniter
body: <p>In one of my project I want to allow user to upload his/her photo in profile. In times of uploading the photo i want to allow them to crop image as per their choice and when they click on update profile button i want to upload only that cropped image as their profile image. I am developing this application in CI. Can anyone help me how can i do this. I have used jquery.Jcrop.js library to crop image. I am able to crop image using below code but when i click on update button then it will upload original image not cropped image. </p>
  
  <pre><code>&lt;input type="file" href="#" class="selectBtn loginlink image_class" name="profilepic" id="profilepic" onChange="fileSelectHandler()"&gt; 
  &lt;img id="preview" /&gt;
  &lt;input type="hidden" class="info1" id="filesize" name="filesize" /&gt;
  &lt;input type="hidden"  class="info1" id="filetype" name="filetype" /&gt;
  &lt;input type="hidden"  class="info1" id="filedim" name="filedim" /&gt;
  &lt;input type="hidden" class="info1" id="w" name="w" /&gt;
  &lt;input type="hidden" class="info1" id="h" name="h" /&gt;
  &lt;input type="hidden" id="x1" name="x1" /&gt;
  &lt;input type="hidden" id="y1" name="y1" /&gt;
  &lt;input type="hidden" id="x2" name="x2" /&gt;
  &lt;input type="hidden" id="y2" name="y2" /&gt;
  </code></pre>
  
  <p>below is javascript code to crop image</p>
  
  <pre><code>function bytesToSize(bytes) {
  var sizes = ['Bytes', 'KB', 'MB'];
  if (bytes == 0)
      return 'n/a';
  var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
  </code></pre>
  
  <p>}
  ;</p>
  
  <pre><code>// check for selected crop region
  function checkForm() {
  if (parseInt($('#w').val()))
      return true;
      $('.error').html('Please select a crop region and then press    Upload').show();
  return false;
  }
  ;
  
  // update info by cropping (onChange and onSelect events handler)
  function updateInfo(e) {
  $('#x1').val(e.x);
  $('#y1').val(e.y);
  $('#x2').val(e.x2);
  $('#y2').val(e.y2);
  $('#w').val(e.w);
  $('#h').val(e.h);
  }
  ;
  
  // clear info by cropping (onRelease event handler)
  function clearInfo() {
  $('.info #w').val('');
  $('.info #h').val('');
  }
  ;
  
  // Create variables (in this scope) to hold the Jcrop API and image size
  var jcrop_api, boundx, boundy;
  
  
  function fileSelectHandler() {
  // get selected file
  var oFile = $('#image_file')[0].files[0];
  // hide all errors
  $('.error').hide();
  // check for image type (jpg and png are allowed)
  var rFilter = /^(image\/jpeg|image\/png)$/i;
  if (!rFilter.test(oFile.type)) {
      $('.error').html('Please select a valid image file (jpg and png are allowed)').show();
      return;
  }
  // check for file size
  if (oFile.size &gt; 250 * 1024) {
      $('.error').html('You have selected too big file, please select a one smaller image file').show();
      return;
  }
  if (oFile.size &lt; 300 * 300) {
      $('.error').html('You have selected too small file, please select a one bigger image file').show();
      return;
  }
  // preview element
  var oImage = document.getElementById('preview');
  // prepare HTML5 FileReader
  var oReader = new FileReader();
  oReader.onload = function (e) {
      // e.target.result contains the DataURL which we can use as a source of the image
      oImage.src = e.target.result;
      oImage.onload = function () { // onload event handler
          // display step 2
          $('.step2').fadeIn(500);
          // display some basic image info
          var sResultFileSize = bytesToSize(oFile.size);
          $('#filesize').val(sResultFileSize);
          $('#filetype').val(oFile.type);
          $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
          // destroy Jcrop if it is existed
          if (typeof jcrop_api != 'undefined') {
              jcrop_api.destroy();
              jcrop_api = null;
              $('#preview').width(oImage.naturalWidth);
              $('#preview').height(oImage.naturalHeight);
          }
          setTimeout(function () {
              // initialize Jcrop
              $('#preview').Jcrop({
                  minSize: [32, 32], // min crop size
                  aspectRatio: 1, // keep aspect ratio 1:1
                  bgFade: true, // use fade effect
                  bgOpacity: .3, // fade opacity
                  onChange: updateInfo,
                  onSelect: updateInfo,
                  onRelease: clearInfo
              }, function () {
                  // use the Jcrop API to get the real image size
                  var bounds = this.getBounds();
                  boundx = bounds[0];
                  boundy = bounds[1];
                  // Store the Jcrop API in the jcrop_api variable
                  jcrop_api = this;
              });
          }, 3000);
      };
  };
  // read selected file as DataURL
  oReader.readAsDataURL(oFile);
  }
  </code></pre>
  
  <p>Below is my controller code</p>
  
  <pre><code>$config1['upload_path'] = './mobileapps/supporter/upimages/candidate/images/';
                  $config1['allowed_types'] = '*';
                  $config1['encrypt_name'] = true;
                  $this-&gt;load-&gt;library('upload', $config1);
                  if (!$this-&gt;upload-&gt;do_upload('profilepic')) {
                      $error = array('error' =&gt; $this-&gt;upload-&gt;display_errors());
                      print_r($error);
                      exit;
                  } else {
                      $image_data = $this-&gt;upload-&gt;data();
  
                      $image = $image_data['file_name'];
                      $target1 = './mobileapps/supporter/upimages/candidate/images/' . $image;
  $config1['source_image'] = $config1['upload_path'] . '/' .     $image_data['file_name'];
  $config1['x_axis'] = $this-&gt;input-&gt;post('x1');
  $config1['y_axis'] = $this-&gt;input-&gt;post('y1');
  $config1['maintain_ratio'] = FALSE;
  $config1['width'] = $this-&gt;input-&gt;post('w');
                      $config1['height'] = $this-&gt;input-&gt;post('h');
                      $config1['quality'] = '90%';
                      $this-&gt;load-&gt;library('image_lib', $config1);
                      if (!$this-&gt;image_lib-&gt;crop()) {
                          echo $this-&gt;image_lib-&gt;display_errors();
                      }else{
                          echo 'else';
                      }
  
                  }
  </code></pre>