Laravel 8 Cropper Js - Crop Image Before Upload

Laravel 8 , Laravel 7 , Laravel

Nicesnippets

3757

07-05-2021


Laravel 8 Cropper Js - Crop Image Before Upload

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