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

URL : 127.0.0.1:8000

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.

<?php
  
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">

<head>
    <title>Crop Image Before Upload Using Croppie.js in Laravel 9</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>


<body>
    <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>
                    <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>


                    <div class="col-md-4">
                        <div id="image-preview"
                            style="background:#e1e1e1;padding:30px;height:300px;"></div>
                    </div>
                </div>


            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>

    <script type="text/javascript">
        $.ajaxSetup({
            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', {
                    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: "{{ route('imageCrop') }}",
                    type: "POST",
                    data: {
                        "image": resp
                    },
                    success: function(data) {
                        html = '<img src="' + resp + '" />';
                        $("#image-preview").html(html);
                    }
                });
            });
        });

    </script>

</body>

</html>

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

URL: http://127.0.0.1:8000/image-crop

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

How To Use Chart JS In Laravel 


laravel chart js, laravel chartjs ajax example, how to create chart in laravel, how to use chart js in laravel, chartjs laravel example, laravel chart...

Laravel whereHas and orWhereHas Query Example


laravel whereHas and orWhereHas query example, wherehas and orWhereHas query in laravel, how to use wherehas in laravel

Laravel 9 Generate Sitemap XML File Tutorial


Learn how to generate a sitemap.xml file in Laravel 9 with this step-by-step tutorial. Improve your website's SEO and enhance user experience.

Laravel 9 Upload image using Summernote editor


A basic Javascript package called Summernote Editor can be used to create online WYSIWYG web editors.

How to Get Current URL in Laravel


how to get current url in laravel, laravel get current url, get current page url in laravel, get full url in laravel, find current url in laravel,