In this tutorial, We will learn how to crop the image with a preview before upload using the crappie jquery plugin in Codeigniter 3. we can resize and crop images before upload using jquery ajax in the Codeigniter application.



Follow some steps to Crop Image Before Upload:


Step 1: 

Create Routes


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


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


application/views/myForm.php

<html lang="en">
    <head>
        <title>Codeigniter 3 - Crop Image Before Upload Example</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="http://demo.rathorji.com/plugin/croppie.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://demo.rathorji.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</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>


you can download croppie plugin file from here https://github.com/foliotek/croppie



Thanks, I hope it will work for you.....