Laravel 9 Crop Image Before Upload Using Cropper JS

In this article, we will see the laravel 9 crop image before uploading using cropper js. Here, we will learn how to crop images before uploading using cropper js in laravel 8 and laravel 9. Using cropper js you can resize the image and upload it to the database without reloading and refreshing in laravel 9.

So, let's see crop the image before upload using the cropper plugin, how to crop an image before upload using cropper js in laravel 8 and laravel 9, cropper js laravel, cropper js jquery plugin, and crop an image using cropper js. There are two ways to use cropper js like npm and CDN files.

Learn More: jQuery Image Cropper JS.

How To Crop Image Before Upload Using Cropper.js In Laravel 9

Step 1: Install laravel 9 Application

Step 2: Configure Database

Step 3: Create Migration and Model

Step 4: Add Routes

Step 5: Create CropImageController

Step 6: Create Crop Image Blade File

Step 7: Run Laravel 9 Application

 

Step 1: Install laravel 9 Application

In this step, we will install the laravel 9 application for crop images using the composer command.

composer create-project laravel/laravel laravel_9_crop_image

 

Step 2: Configure Database

Now, we will configure the database details in the .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=laravel_9_image_upload
DB_USERNAME=root
DB_PASSWORD=root

 

 

Step 3: Create Migration and Model

In this step, we will create the migration and model using the following command.

php artisan make:model CropImage -m

Migration:

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateCropImageTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('crop_image', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('crop_image');
    }
}

After that, we will migrate the table using the following command.

php artisan migrate

 

Step 4: Add Routes

In this step, we will add routes to the web.php file. So, add the following code to that file.

routes/web.php

<?php

use App\Http\Controllers\CropImageController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('crop-image-upload', [CropImageController::class, 'index']);
Route::post('crop-image-upload-ajax', [CropImageController::class, 'cropImageUploadAjax']);

 

Step 5: Create CropImageController

Now, we will create the CropImageController.php file using the following command.

php artisan make:controller CropImageController

app\Http\Controllers\CropImageController

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\CropImage;
 
class CropImageController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('crop-image-upload');
    }
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function cropImageUploadAjax(Request $request)
    {
        $folderPath = public_path('upload/');
 
        $image_parts = explode(";base64,", $request->image);
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];
        $image_base64 = base64_decode($image_parts[1]);
 
        $imageName = uniqid() . '.png';
 
        $imageFullPath = $folderPath.$imageName;
 
        file_put_contents($imageFullPath, $image_base64);
 
         $saveFile = new CropImage;
         $saveFile->name = $imageName;
         $saveFile->save();
    
        return response()->json(['success'=>'Crop Image Uploaded Successfully']);
    }
}

 

 

Step 6: Create Crop Image Blade File

Now, we will create the crop-image-upload.blade.php file. So, add the following code to that file.

resources/views/crop-image-upload.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Crop Image Before Upload Using Cropper JS - Techsolutionstuff</title>
    <meta name="_token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
</head>
<style type="text/css">
    body{
        background:#f6d352; 
    }
    h1{
        font-weight: bold;
        font-size:23px;
    }
    img {
        display: block;
        max-width: 100%;
    }
    .preview {
        text-align: center;
        overflow: hidden;
        width: 160px; 
        height: 160px;
        margin: 10px;
        border: 1px solid red;
    }
    input{
        margin-top:40px;
    }
    .section{
        margin-top:150px;
        background:#fff;
        padding:50px 30px;
    }
    .modal-lg{
        max-width: 1000px !important;
    }
</style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2 section text-center">
                <h1>Laravel 9 Crop Image Before Upload Using Cropper JS - Techsolutionstuff</h1>
                <input type="file" name="image" class="image">
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">How to crop image before upload image in laravel 9 - Techsolutionstuff</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="img-container">
                        <div class="row">
                            <div class="col-md-8">
                                <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                            </div>
                            <div class="col-md-4">
                                <div class="preview"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="crop">Crop</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var $modal = $('#modal');
        var image = document.getElementById('image');
        var cropper;

        $("body").on("change", ".image", function(e){
            var files = e.target.files;
            var done = function (url) {
                image.src = url;
                $modal.modal('show');
            };

            var reader;
            var file;
            var url;

            if (files && files.length > 0) {
                file = files[0];

                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    };
                reader.readAsDataURL(file);
                }
            }
        });

        $modal.on('shown.bs.modal', function () {
            cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 3,
                preview: '.preview'
            });
        }).on('hidden.bs.modal', function () {
            cropper.destroy();
            cropper = null;
        });

        $("#crop").click(function(){
            canvas = cropper.getCroppedCanvas({
                width: 160,
                height: 160,
            });

            canvas.toBlob(function(blob) {
                url = URL.createObjectURL(blob);
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    var base64data = reader.result; 
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "crop-image-upload-ajax",
                        data: {'_token': $('meta[name="_token"]').attr('content'), 'image': base64data},
                        success: function(data){
                            console.log(data);
                            $modal.modal('hide');
                            alert("Crop image successfully uploaded");
                        }
                    });
                }
            });
        });
    </script>
</body>
</html> 

 

Step 7: Run Laravel 9 Application

Now, run the crop image before uploading using cropper plugin in laravel 9 using the following command.

php artisan serve

 


You might also like:

RECOMMENDED POSTS

FEATURE POSTS