Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Create Controller
php artisan make:controller ImageController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller ImageController
app\Http\Controllers\ImageController.php
//app\Http\Controllers\ImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
public function imageCreate(){
return view('Uploadimage');
}
public function ImageUpload(Request $request)
{
$image = $request->image;
list($type, $image) = explode(';', $image);
list(, $image) = explode(',', $image);
$image = base64_decode($image);
$image_name= time().'.png';
$path = public_path('image/'.$image_name);
file_put_contents($path, $image);
return response()->json(['status'=>true]);
}
}
create a blade file Uploadimage.blade.php resources/views/Uploadimage.blade.php
Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
jquery
https://www.jsdelivr.com/package/npm/jquery
Croppie
https://foliotek.github.io/Croppie/
https://github.com/foliotek/croppie
https://cdnjs.com/libraries/croppie
//resources/views/Uploadimage.blade.php
<html lang="en">
<head>
<title>Laravel 9 Preview and Crop Image Before Upload using Jquery Ajax</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.js"></script>
<meta name="token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<div class="card" style="margin-top:20px;">
<div class="card-header">
Laravel 9 Preview and Crop Image Before Upload using Jquery Ajax
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="upload-demo"></div>
</div>
<div class="col-md-4" style="padding:5%;">
<strong>Select image for crop:</strong>
<input type="file" id="images" name="image">
<button class="btn btn-primary btn-block image-upload" style="margin-top:2%">Upload Image</button>
</div>
<div class="col-md-4">
<div id="show-crop-image" style="background:#e2e2e2;width:400px;padding:60px 60px;height:400px;"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
}
});
var resize = $('#upload-demo').croppie({
enableExif: true,
enableOrientation: true,
viewport: {
width: 300,
height: 300,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#images').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
resize.croppie('bind',{
url: e.target.result
}).then(function(){
console.log('success bind image');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.image-upload').on('click', function (ev) {
resize.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (img) {
$.ajax({
url: '{{ route('save') }}',
type: "POST",
data: {"image":img},
success: function (data) {
html = '<img src="' + img + '" />';
$("#show-crop-image").html(html);
}
});
});
});
</script>
</body>
</html>
Routes routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
Route::get('/', function () {
return view('welcome');
});
Route::get('crop-image', [ImageController::class, 'imageCreate']);
Route::post('crop-image-store', [ImageController::class, 'ImageUpload'])->name('save');
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
