Codeigniter Crop Image Before Upload Example

This article goes in detailed on codeigniter resize image before upload. we will help you to give example of preview image before upload codeigniter. it's simple example of image crop before upload jquery codeigniter. we will help you to give example of codeigniter ajax image upload and crop. follow bellow step for codeigniter image upload before uploading.

we almost require to crop image before upload feature in big project like cms, crm, social media project. so if you require to crop image with circle or triangle then you should use croppie jquery library. croppie plugin will help to make better way to crop and you can do it easily.

In this example, will create very simple example for you, so basically you can understand how it works. we need to create two routes with get and post method then we will create one controller with two methods. after that we will create one view file for layout and create "upload" folder on root directory so image upload will there.

Let's just follow bellow steps:

Preview:

Step 1: Create Routes

In first step we require to add two route for display form and post form for image upload. so open routes.php file and add code like as bellow:

application/config/routes.php


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

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['my-form'] = "MyFormController";
$route['my-form-upload']['post'] = "MyFormController/post";

Step 2: Create Controller

In this step, we need to create MyFormController Controller and define two methods, index() and post(). So let's proceed.

application/controllers/MyFormController.php


<?php
    
class MyFormController extends CI_Controller {
     
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function __construct() {
       parent::__construct();
    }
     
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function index()
    {
        $this->load->view('myForm');
    } 
     
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function post()
    {
        $data = $_POST['image'];
     
        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);
     
        $data = base64_decode($data);
        $imageName = time().'.png';
        file_put_contents('upload/'.$imageName, $data);
     
        echo 'done';
    }
}

Step 3: Create View File

In last step, we need to create view file, So here create myForm.php view file and copy bellow code, here we will display form.

application/views/myForm.php


<html lang="en">
<head>
  <title>Codeigniter 3 - Crop Image Before Upload Example - ItsolutionStuff.com</title>
  <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
  <script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>
  <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
  <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">
</head>
<body>
    
<div class="container">
	<div class="panel panel-default">
	  <div class="panel-heading">Codeigniter 3 - Crop Image Before Upload Example - ItsolutionStuff.com</div>
	  <div class="panel-body">
     
	  	<div class="row">
	  		<div class="col-md-4 text-center">
				<div id="upload-demo" style="width:350px"></div>
	  		</div>
	  		<div class="col-md-4" style="padding-top:30px;">
				<strong>Select Image:</strong>
				<br/>
				<input type="file" id="upload">
				<br/>
				<button class="btn btn-success upload-result">Upload Image</button>
	  		</div>
	  		<div class="col-md-4" style="">
				<div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
	  		</div>
	  	</div>
      
	  </div>
	</div>
</div>
     
<script type="text/javascript">
$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});
     
$('#upload').on('change', function () { 
	var reader = new FileReader();
    reader.onload = function (e) {
    	$uploadCrop.croppie('bind', {
    		url: e.target.result
    	}).then(function(){
    		console.log('jQuery bind complete');
    	});
    	    
    }
    reader.readAsDataURL(this.files[0]);
});
     
$('.upload-result').on('click', function (ev) {
	$uploadCrop.croppie('result', {
		type: 'canvas',
		size: 'viewport'
	}).then(function (resp) {
     
		$.ajax({
			url: "/my-form-upload",
			type: "POST",
			data: {"image":resp},
			success: function (data) {
				html = '<img src="' + resp + '" />';
				$("#upload-demo-i").html(html);
			}
		});
	});
});
    
</script>
    
</body>
</html>

Now you need to create "upload" directory on your root folder.

Now we are ready to this full example.

So let's run bellow command on your root directory for quick run:

php -S localhost:8000

Now you can open bellow URL on your browser:

http://localhost:8000/my-form

I hope it can help you...

Codeigniter Crop Image Before Upload Example

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles