Crop Image Before Upload Codeigniter 3 Example
In this post we will give you information about Crop Image Before Upload Codeigniter 3 Example. Hear we will give you detail about Crop Image Before Upload Codeigniter 3 ExampleAnd how to use it also give you demo for it if it is necessary.
In this tutorial, i would like to share with you image crop with preview before upload using croppie jquery plugin in codeigniter 3. we can resize and crop image before upload using jquery ajax in php codeigniter application.
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.onlinecode/plugin/jquery.js"></script>
<script src="http://demo.onlinecode/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.onlinecode/plugin/bootstrap-3.min.css">
<link rel="stylesheet" href="http://demo.onlinecode/plugin/croppie.css">
</head>
<body>
<div >
<div >
<div >Codeigniter 3 - Crop Image Before Upload Example - ItsolutionStuff.com</div>
<div >
<div >
<div >
<div id="upload-demo" style="width:350px"></div>
</div>
<div style="padding-top:30px;">
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<br/>
<button >Upload Image</button>
</div>
<div 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…
Hope this code and post will helped you for implement Crop Image Before Upload Codeigniter 3 Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs