Skip to content

All topics  /  Laravel

Laravel 8 Cropper Js - Crop Image Before Upload

Laravel ·

Teams applying “Laravel 8 Cropper Js - Crop Image Before Upload” in a production project can use the corresponding workflow to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Hi Dev,

Today i will explained laravel 8 cropper Js - crop image before upload laravel 8 app using copper js library of jQuery.

Step 1 – Install Laravel 8 Project


First of all, execute the following command on terminal to download or install new laravel project to implement laravel 8 crop image before upload using cropper js:

Step 2 – Connecting Database to Project

In this step, open .env file and add the database details in .env file:

.env 

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

Step 3 – Migration & Model

In this step, execute the following command to create modeland migration file: 

php artisan make:model Picture -m

/database/migrations/2021_05_07_102949_create_pictures_table.php 

<?php

 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

 
class CreatePicturesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('pictures', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('pictures');
    }
}

And execute the following command to create tables into your database: 

php artisan migrate

In this step, add routes in web.php file. So navigate to routes folder and open web.php file. And add the following routes into web.php file:

routes/web.php 

use App\Http\Controllers\CropImageController;
Route::get('crop-image-upload', [CropImageController::class, 'index']);
Route::post('crop-image-upload', [CropImageController::class, 'uploadCropImage']);

In this step, execute the following command to create a controller name CropImageController.php: 

php artisan make:controller CropImageController

app\Http\Controllers\CropImageController 

<?php

 
namespace App\Http\Controllers;

 
use Illuminate\Http\Request;
use App\Models\Picture;

 
class CropImageController extends Controller
{

 
    public function index()
    {
        return view('crop-image-upload');
    }

 
    public function uploadCropImage(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 Picture;
         $saveFile->name = $imageName;
         $saveFile->save();

    
        return response()->json(['success'=>'Crop Image Uploaded Successfully']);
    }
}

Create a blade view file named crop-image-upload.blade.php file. So navigate to resources/views folder and create one file name crop-image-upload.blade.php

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

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Cropper js - Crop Image Before Upload - Nicesnippets.com</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 8 Cropper Js - Crop Image Before Upload - Nicesnippets.com</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">Laravel 8 Cropper Js - Crop Image Before Upload - Nicesnippets.com</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>
</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",
                    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>

Finally, Execute the following command to start development server to run your laravel crop image before upload using cropper js. 

php artisan serve

Now you are ready to run our example so run bellow command. 

http://localhost:8000/crop-image-upload

More on this topic