Hello developers in this tutorial we will discuss about how to Convert Image into Webp format and create a downloadable link
Table of Contents
1:Install Intervention Image
For converting images into Webp format usnig laravel we need to install a package intervention Image with the help of composer copy the below command and paste it in the terminal
code for image package : Copy
composer require intervention/image
2:Add into Providers and alias
For setting up PDF in laravel go to config/app.php register pdf provider and alias in app.php file
Copy for creating artisan commandCopy
'providers' => [
/* Application Service Providers */
Intervention\Image\ImageServiceProvider::class,
],
'aliases' => Facade::defaultAliases()->merge([
'Image' => Intervention\Image\Facades\Image::class,
])->toArray(),
3:Create blade file
Now create a blade file resources/views/convertImage.blade.php and paste the below code
blade file code: Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convert image by DeveloperCodez</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
</head>
<body>
<form action="{{url('convertImage')}}" id="formSubmit" method="POST" enctype="multipart/form-data">
@csrf
<input type="file" name="image">
<button type="submit">Convert to WebP</button>
</form>
</body>
<script>
$(document).ready(function(e) {
$('#formSubmit').on('submit', (function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(result) {
if (result.status == 'success') {
console.log(result);
} else {
console.log(result);
}
}
});
}));
})
</script>
</html>
5:Create and setup ImageController
Now for setting controller create a controller ImageCotroller
php artisan make:controlle ImageController
Copy the given below code
code Copy
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;
class ImageController extends Controller
{
public function convertImage(Request $request)
{
$request->validate([
'image' => 'required|image',
]);
$imagePath = $request->file('image')->getPathname();
$webpPath = $this->convertToWebp($imagePath);
return response()->download($webpPath)->deleteFileAfterSend(true);
}
private function convertToWebp($imagePath)
{
$webpPath = tempnam(sys_get_temp_dir(), 'webp');
$image = Image::make($imagePath)->encode('webp')->save($webpPath);
return $webpPath;
}
}
6:Setup route file
Building new routes for converting image
code : Copy
<?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::view('/imageConvert','convertImage');
Route::post('convertImage', [ImageController::class, 'convertImage']);
7:Convert image into Webp format
php artisan serve
http://127.0.0.1:8000/imageConvert
0 Comments (Please let us know your query)