Laravel Crop Image Before Upload using Cropper JS

Admin   Laravel   146  2021-03-16 17:30:04

Hi Guys,

In this tutorial,I will learn you how to use image cropper in laravel.you can simply and easy to use crop image using cropper.js laravel

Cropper.js is an easy to use JavaScript/jQuery plugin for image cropping with support of live previews and custom aspect ratio.this plugin provide features move,zoom,rotate,Fully responsive and mobile-friendly.

The plugin displays a resizable grid layer on a given image allowing to visually resize and crop the image.

I will use model view in example. model display to upload image and crop image preview.follow bellow step example.

Step 1: Create Route

In this First step, you will create to route in web.php file.

routes/web.php

 

Route::get('image-cropper','[email protected]');

Route::post('image-cropper/upload','[email protected]');

Step 2: Create Controller

In this step,you will create to ImageCropperController.php in controller.

app/Http/Controller/ImageCropperController.php

 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageCropperController extends Controller

{

public function index()

{

return view('cropper');

}

public function upload(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]);

$file = $folderPath . uniqid() . '.png';

file_put_contents($file, $image_base64);

return response()->json(['success'=>'success']);

}

}

Step 4: View File

In step,you will create to cropper.blade.php file in views folder.

resources/views/cropper.blade.php

 

<!DOCTYPE html>

<html>

<head>

<title>Laravel Crop Image Before Upload using Cropper JS</title>

<meta name="_token" content="{{ csrf_token() }}">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>

</head>

<style type="text/css">

img {

display: block;

max-width: 100%;

}

.preview {

overflow: hidden;

width: 160px;

height: 160px;

margin: 10px;

border: 1px solid red;

}

.modal-lg{

max-width: 1000px !important;

}

</style>

<body>

<div class="container">

<h1>Laravel Crop Image Before Upload using Cropper JS - </h1>

<input type="file" name="image" class="image">

</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 Crop Image Before Upload using Cropper JS - </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: "image-cropper/upload",

data: {'_token': $('meta[name="_token"]').attr('content'), 'image': base64data},

success: function(data){

$modal.modal('hide');

alert("success upload image");

}

});

}

});

})

</script>

</body>

</html>

Step 5: Create Folder

in this step,you will create to folder public/upload. In this folder enter to crop image.

It will help you.....