In Laravel, the "Intervention Image" package is a popular and powerful library that provides a range of image manipulation functionalities. It simplifies tasks such as resizing, cropping, rotating, and watermarking images in your Laravel applications. Here's a step-by-step guide on how to use the Intervention Image package in Laravel:
Step 1: Install Laravel App
composer create-project laravel/laravel example-app
Step 2: Install Intervention Image Package
composer require intervention/image
If you are using Laravel 6 or letter version then you need to add following lines in config/app.php File:
config/app.php
<?php
return [
...
...
'providers' => [
...
Intervention\Image\ImageServiceProvider::class
],
'aliases' => Facade::defaultAliases()->merge([
...
'Image' => Intervention\Image\Facades\Image::class
]]
]
Step 3: Create Routes
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::controller(ImageController::class)->group(function(){
Route::get('image-upload', 'index');
Route::post('image-upload', 'store')->name('image.store');
});
Step 4: Create Controller File
php artisan make:controller ImageController
app/Http/Controllers/ImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Image;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class ImageController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('imageUpload');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request): JsonResponse
{
$this->validate($request, [
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
if($request->hasFile('image')) {
$image = Image::make($request->file('image'));
/**
* Main Image Upload on Folder Code
*/
$imageName = time().'-'.$request->file('image')->getClientOriginalName();
$destinationPath = public_path('images/');
$image->save($destinationPath.$imageName);
/**
* Generate Thumbnail Image Upload on Folder Code
*/
$destinationPathThumbnail = public_path('images/thumbnail/');
$image->resize(100,100);
$image->save($destinationPathThumbnail.$imageName);
/**
* Write Code for Image Upload Here,
*
* $upload = new Images();
* $upload->file = $imageName;
* $upload->save();
*/
return back()
->with('success','Image Upload successful')
->with('imageName',$imageName);
}
return back();
}
}
Step 5: Create View File
resources/views/imageUpload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Image Intervention Example Tutorial - webthestuff.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Laravel Image Intervention Example Tutorial - webthestuff.com</h1>
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if ($message = Session::get('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>{{ $message }}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="row">
<div class="col-md-4">
<strong>Original Image:</strong>
<br/>
<img src="/images/{{ Session::get('imageName') }}" width="300px" />
</div>
<div class="col-md-4">
<strong>Thumbnail Image:</strong>
<br/>
<img src="/thumbnail/{{ Session::get('imageName') }}" />
</div>
</div>
@endif
<form action="{{ route('image.store') }}" method="post" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-12">
<br/>
<input type="file" name="image" class="image">
</div>
<div class="col-md-12">
<br/>
<button type="submit" class="btn btn-success">Upload Image</button>
</div>
</div>
</form>
</div>
</body>
</html>
Run Project:
php artisan serve
Now, Go to web browser, type the URL and see the output:
http://localhost:8000/image-upload
Thank you
