CodeIgniter 4 Image Crop with jQuery Croppie Example

August 28, 2021 XpertPhp

In this article, we will explain to you how to image crop using jquery croppie plugin in CodeIgniter 4(CodeIgniter 4 Image Crop with jQuery Croppie Example). we can easily crop image before upload using croppie js in CodeIgniter 4.

A croppie is a powerful javascript libery plugin. so here in this example, we use the croppie CDN url for CSS and js. which not only allows fast and subtle image cropping, but also comes with tons of features to adjust image cropping.

In this example, We will use jquery croppie and ajax to crop the image with croppie and upload the image using ajax and bootstrap modal in the codeigniter 4 application. so you can see our following example.

Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Create a Database in table
Step 4: Connect to Database
Step 5: Create Controller and Model
Step 6: Create Views Files
Step 7: Run The Application

Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.

Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url

Step 3: Create a Database in table
In this step, We will create the database and table.

CREATE TABLE IF NOT EXISTS `students` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `image` varchar(164) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

CREATE TABLE IF NOT EXISTS `students` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`image` varchar(164) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

Step 4: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'codeigniter4_demo',
		'DBDriver' => 'MySQLi',
		'DBPrefix' => '',
		'pConnect' => false,
		'DBDebug'  => (ENVIRONMENT !== 'production'),
		'cacheOn'  => false,
		'cacheDir' => '',
		'charset'  => 'utf8',
		'DBCollat' => 'utf8_general_ci',
		'swapPre'  => '',
		'encrypt'  => false,
		'compress' => false,
		'strictOn' => false,
		'failover' => [],
		'port'     => 3306,
	];

public $default = [

'DSN' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'codeigniter4_demo',

'DBDriver' => 'MySQLi',

'DBPrefix' => '',

'pConnect' => false,

'DBDebug' => (ENVIRONMENT !== 'production'),

'cacheOn' => false,

'cacheDir' => '',

'charset' => 'utf8',

'DBCollat' => 'utf8_general_ci',

'swapPre' => '',

'encrypt' => false,

'compress' => false,

'strictOn' => false,

'failover' => [],

'port' => 3306,

];

Step 5: Create Controller and Model
In this step, we will create the “Student.php” controller and the “StudentModel.php” model.
app/Controllers/Student.php

<?php 

namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\StudentModel;
 
class Student extends Controller
{
 
    public function __construct()
    {
       helper(['form', 'url']); 
    }
    public function index()
    {   
	return view('add');
    }    
    public function store()
    { 
		$data = $_POST['image'];
		if(!empty($data)){
			
			$img_arr_a = explode(";", $data);
			$img_arr_b = explode(",", $img_arr_a[1]);
 
			$data = base64_decode($img_arr_b[1]);
			$image_name = time() . '.png';
			$path =  WRITEPATH . 'uploads/'. $image_name;

			file_put_contents($path, $data);
			
			$saveData = [
			 'image'  => $image_name,
			 ];
			 
			$model = new StudentModel(); 
			$save = $model->insert($saveData);

			return json_encode(['status' => 1, 'message' => "Image uploaded successfully"]);
		}
		
    }
 
}
?>

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

use App\Models\StudentModel;

class Student extends Controller

{

public function __construct()

{

helper(['form', 'url']);

}

public function index()

{

return view('add');

}

public function store()

{

$data = $_POST['image'];

if(!empty($data)){

$img_arr_a = explode(";", $data);

$img_arr_b = explode(",", $img_arr_a[1]);

$data = base64_decode($img_arr_b[1]);

$image_name = time() . '.png';

$path = WRITEPATH . 'uploads/'. $image_name;

file_put_contents($path, $data);

$saveData = [

'image' => $image_name,

];

$model = new StudentModel();

$save = $model->insert($saveData);

return json_encode(['status' => 1, 'message' => "Image uploaded successfully"]);

}

app/Models/StudentModel.php

<?php 
namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
 
class StudentModel extends Model
{
    protected $table = 'Students';
 
    protected $allowedFields = ['image'];
}
?>

<?php

namespace App\Models;

use CodeIgniter\Database\ConnectionInterface;

use CodeIgniter\Model;

class StudentModel extends Model

{

protected $table = 'Students';

protected $allowedFields = ['image'];

}

Step 6: Create Views Files
Finally, we will create the add.php in the app/views directory.

app/views/add.php

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeIgniter 4 Crop Image Example Using Croppie.js - XpertPhp</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
</head>
<body>
    <div class="container mt-4">
        <input type="file" name="file" id="img-crop" accept="image/*" />
    </div>
    <div id="imageModel" class="modal fade bd-example-modal-lg" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Crop and Resize Image</h4>
                </div>
                <div class="modal-body">
                    <div id="previewImage" style="width:400px;"></div>
                    <button class="btn btn-primary btn-block crop_my_image">Store</button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
    <script>
        $(document).ready(function () {
            $image_crop = $('#previewImage').croppie({
                enableExif: true,
                viewport: {
                    width: 220,
                    height: 220,
                    type: 'circle' // square
                },
                boundary: {
                    width: 320,
                    height: 320
                }
            });

            $('#img-crop').on('change', function () {
                var reader = new FileReader();
                reader.onload = function (event) {
                    $image_crop.croppie('bind', {
                        url: event.target.result
                    }).then(function () {
                        
                    });
                }
                reader.readAsDataURL(this.files[0]);
                $('#imageModel').modal('show');
            });

            $('.crop_my_image').click(function (event) {
                $image_crop.croppie('result', {
                    type: 'canvas',
                    size: 'viewport'
                }).then(function (response) {
                    $.ajax({
                        type: 'post',
                        url: "<?php echo site_url('student/store'); ?>",
                        data: {
                            "image": response
                        },
                        success: function (data) {
                            console.log(data);
                            $('#imageModel').modal('hide');
                        }
                    })
                });
            });
        });
    </script>
</body>
</html>

<html>

<head>

<title>CodeIgniter 4 Crop Image Example Using Croppie.js - XpertPhp</title>

</head>

<body>

</div>

<h4 class="modal-title">Crop and Resize Image</h4>

</div>

<button class="btn btn-primary btn-block crop_my_image">Store</button>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

$(document).ready(function () {

$image_crop = $('#previewImage').croppie({

enableExif: true,

viewport: {

width: 220,

height: 220,

type: 'circle' // square

boundary: {

width: 320,

height: 320

}

});

$('#img-crop').on('change', function () {

var reader = new FileReader();

reader.onload = function (event) {

$image_crop.croppie('bind', {

url: event.target.result

}).then(function () {

});

}

reader.readAsDataURL(this.files[0]);

$('#imageModel').modal('show');

});

$('.crop_my_image').click(function (event) {

$image_crop.croppie('result', {

type: 'canvas',

size: 'viewport'

}).then(function (response) {

$.ajax({

type: 'post',

url: "<?php echo site_url('student/store'); ?>",

data: {

"image": response

success: function (data) {

console.log(data);

$('#imageModel').modal('hide');

}

})

});

</script>

</body>

</html>

Step 7: Run The Application
We can start the server and run the codeigniter 4 application using the below command.

php spark serve

1	php spark serve

Now we will run our example using the below Url in the browser.

http://localhost:8080/student

1	http://localhost:8080/student

If you liked this article, you can also download it through our Github Repository.