In this tutorial, we'll demonstrate how to crop an image in Laravel 9 before uploading it. We already have a post about resizing images before uploading them to servers.
We'll be using the Croppie.js jQuery plugin in this tutorial. A CSS and JS file are used by this plugin. Either by placing the plugin files in your application's public folder or by using a CDN link, you can use these plugins. It will be really interesting to watch and quite simple to use in this lesson.
Laravel Installation
Using composer, we will construct a Laravel project. Therefore, please verify that composer is installed on your machine. If not, perhaps this guide can assist you in installing composer on your computer.
The command to create a Laravel project is as follows:
composer create-project --prefer-dist laravel/laravel blogLaravel's development server can be launched by:
php artisan serveURL : 127.0.0.1:8000
assuming your system already has Laravel installed.
Create Images Folder
Navigate to the /public folder located at the application root. Make a folder called images. Inside of it, we will save the created signature photos.
Make sure the images folder has the necessary permissions to accept material.
Create Controller
The creation of a controller file is the next step.
php artisan make:controller ImageController
At the /app/Http/Controllers folder, a file named ImageController.php will be generated.
Write the entire code into ImageController.php after opening it.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
/**
* Show the application view.
*
* @return \Illuminate\Http\Response
*/
public function imageCrop()
{
return view('image-crop');
}
/**
* Submit image upload.
*
* @return \Illuminate\Http\Response
*/
public function imageCropPost(Request $request)
{
$data = $request->image;
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$image_name = time() . '.png';
$path = public_path() . "/images/" . $image_name;
file_put_contents($path, $data);
return response()->json(['status' => 1, 'message' => "Image uploaded successfully"]);
}
}Create Blade Layout File
Create a file called image-crop.blade.php in the /resources/views folder.
Write the entire code into image-crop.blade.php after opening it.
<html lang="en">
<head>
<title>Crop Image Before Upload Using Croppie.js in Laravel 9</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container" style="margin-top:30px;">
<div class="panel panel-primary">
<div class="panel-heading">Crop Image Before Upload Using Croppie.js in Laravel 9</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="cropie-demo" style="width:250px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<strong>Select Image:</strong>
<input type="file" id="upload">
<br />
<button class="btn btn-success upload-result">Upload Image</button>
</div>
<div class="col-md-4">
<div id="image-preview"
style="background:#e1e1e1;padding:30px;height:300px;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$uploadCrop = $('#cropie-demo').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function() {
var reader = new FileReader();
reader.onload = function(e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function() {
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function(ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(resp) {
$.ajax({
url: "{{ route('imageCrop') }}",
type: "POST",
data: {
"image": resp
},
success: function(data) {
html = '<img src="' + resp + '" />';
$("#image-preview").html(html);
}
});
});
});
</script>
</body>
</html>Create Route
To add these routes, open web.php in the /routes folder.
# Add this to header
use App\Http\Controllers\ImageController;
//...
Route::get('image-crop', [ImageController::class, "imageCrop"]);
Route::post('image-crop', [ImageController::class, "imageCropPost"])->name("imageCrop");
Application Testing
Adding these routes requires opening web.php in the /routes folder.
php artisan serve
URL: http://127.0.0.1:8000/image-crop
When we click the Upload button, the cropped image is saved into the images folder and an image preview is created on the right side of the screen.
We hope that this post has given you a thorough understanding of how to crop an image before uploading it using Croppie.js in Laravel 9.
