LARAVEL Tutorial


Crop And Resize Image Before Upload In Laravel

Author:- Shubham Kushwah
Updated Date:-12-08-2020

Crop and resize image before upload in laravel. In this post, i will show you how to crop and resize image size before upload image in laravel using jquery cropper js.

If you are uploading images into server and database. And at that time, you need to crop and resize image before upload using jQuery. So in this tutorial, i will show you simple way to crop and resize image before using jQuery cropper js in laravel.

Cropper.js is simple JavaScript/jQuery library. And you can use this library to crop and resize image before upload to web server. 

In this crop and resize image size before upload post, I will use bootstrap 4 model to display cropper. And as well as bootstrap display crop image preview in model.

Laravel Crop and Resize Image Before Upload using jQuery Cropper js

Just follow the below given easy steps to crop image and resize image size before upload to server using jQuery cropper:

Step 1: Create Route

First of all, go to routes folder and open web.php file. Then add the following routes into web.php file:

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

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

Step 2: Create Controller

Now, go to app/http/controllers folder and create ImageCropperController.php controller file. Then add the following code into it:

<?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: Create View File

Now, go to resources/views folder and create cropper.blade.php file in views folder. Then add the following code into your view file:

<!DOCTYPE html>

<html>

<head>

<title>Crop and Resize Image Before Upload using jQuery 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 - w3alert.com</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 and Resize Image Before Upload using jQuery Cropper JS - w3alert.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: "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 for Store Crop Image

Now, go to public folder and create upload folder inside it. So, you can upload crop image inside it.