In this tutorial, we'll demonstrate how to crop an image in Laravel 9 before uploading it. We already have a post about resizing images before uploading them to servers.

We'll be using the Croppie.js jQuery plugin in this tutorial. A CSS and JS file are used by this plugin. Either by placing the plugin files in your application's public folder or by using a CDN link, you can use these plugins. It will be really interesting to watch and quite simple to use in this lesson.

Laravel Installation

Using composer, we will construct a Laravel project. Therefore, please verify that composer is installed on your machine. If not, perhaps this guide can assist you in installing composer on your computer.
The command to create a Laravel project is as follows:

composer create-project --prefer-dist laravel/laravel blog

Laravel's development server can be launched by:

php artisan serve


assuming your system already has Laravel installed.

Create Images Folder

Navigate to the /public folder located at the application root. Make a folder called images. Inside of it, we will save the created signature photos.

Make sure the images folder has the necessary permissions to accept material.

Create Controller

The creation of a controller file is the next step.

php artisan make:controller ImageController

At the /app/Http/Controllers folder, a file named ImageController.php will be generated.

Write the entire code into ImageController.php after opening it.

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class ImageController extends Controller
     * Show the application view.
     * @return \Illuminate\Http\Response
    public function imageCrop()
        return view('image-crop');
     * Submit image upload.
     * @return \Illuminate\Http\Response
    public function imageCropPost(Request $request)
        $data = $request->image;

        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);

        $data = base64_decode($data);
        $image_name = time() . '.png';
        $path = public_path() . "/images/" . $image_name;

        file_put_contents($path, $data);

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

Create Blade Layout File

Create a file called image-crop.blade.php in the /resources/views folder.

Write the entire code into image-crop.blade.php after opening it.

<html lang="en">

    <title>Crop Image Before Upload Using Croppie.js in Laravel 9</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="container" style="margin-top:30px;">
        <div class="panel panel-primary">
            <div class="panel-heading">Crop Image Before Upload Using Croppie.js in Laravel 9</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <div id="cropie-demo" style="width:250px"></div>
                    <div class="col-md-4" style="padding-top:30px;">
                        <strong>Select Image:</strong>
                        <input type="file" id="upload">
                        <br />
                        <button class="btn btn-success upload-result">Upload Image</button>

                    <div class="col-md-4">
                        <div id="image-preview"


    <script src=""></script>
    <script src=""></script>

    <script type="text/javascript">
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

        $uploadCrop = $('#cropie-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', {
                }).then(function() {
                    console.log('jQuery bind complete');

        $('.upload-result').on('click', function(ev) {
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function(resp) {
                    url: "{{ route('imageCrop') }}",
                    type: "POST",
                    data: {
                        "image": resp
                    success: function(data) {
                        html = '<img src="' + resp + '" />';




Create Route

To add these routes, open web.php in the /routes folder.

# Add this to header
use App\Http\Controllers\ImageController;


Route::get('image-crop', [ImageController::class, "imageCrop"]);
Route::post('image-crop', [ImageController::class, "imageCropPost"])->name("imageCrop");

Application Testing

Adding these routes requires opening web.php in the /routes folder.

php artisan serve


When we click the Upload button, the cropped image is saved into the images folder and an image preview is created on the right side of the screen.

We hope that this post has given you a thorough understanding of how to crop an image before uploading it using Croppie.js in Laravel 9.

Recommended Posts

View All

Laravel 9 generate RSS Feed Tutorial With Example

Learn how to generate RSS feeds in Laravel 9 with our easy-to-follow tutorial. Get step-by-step instructions and real-world examples. Start today!

How To Integrate Google Maps in Laravel

A number of ways are available through the Google Maps JavaScript API to build maps for web applications.

How to inline row editing using Laravel 9

Learn how to implement inline row editing in Laravel 9 with our step-by-step guide. Make editing data faster and more efficient on your website.

How To Create Url Shortener In Laravel 9 Application

How to create a URL shortener tool using Laravel 9's short URL package, similar to or

Laravel 8 Collection with first() and firstWhere() Methods Example

You'll learn how to use the first() and firstWhere() methods in Laravel 8 Collection. The Laravel collection will make working with arrays much easier