intervention/image change image format laravel tutorial

intervention image format converter/change in laravel using intervention/image composer, In this important post, will teach you how to configure image intervention integration in the laravel application and after use of it how to change provided image extension converts the image from the default image extension.

intervention/image composer we will install in our large application, then after we will configure to register its service provider and aliases name from the run global class name for the image. So this is very easy to class in the controller and any file of the application directly without giving any intervention path.

Image file format Convert in Laravel using image/intervention all step by step in this post I will simply teach you, you just need to follow the below-provided step and integrate into your application.

Image/interventions as the source using PHP GD library for the process of all the images, but if you still want to make customize your setting then you can create the public setting file and customize the intervention default according to you.

So let's start integrating the image/intervention tutorial for converting the image file format.

Step 1. Install Composer

Install the image intervention composer package in the laravel application, use the below-provided command in your application terminal, and hit enter, this command will install the composer image intervention dependency.

composer require intervention/image

Step 2. Configuration

'providers' => [
    .......
    Intervention\Image\ImageServiceProvider::class,
];
'aliases' => [
    .......
    'Image' => Intervention\Image\Facades\Image::class,
]

Publish configuration in Laravel

by default image intervention uses the GD library extension the process all the images, if you want to switch to Imagick, you can pull the configuration file into your application by running the below-provided command, this command will generate an image integration configuration file in your config folder in the application for the customize the default intervention image default setting.

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"

Publish configuration in Laravel <= 4

If you are running laravel version 4 or less you need to press this command for the generating configuration file.

php artisan config:publish intervention/image

Step 3. Route File

Create a controller using the below-provided controller make command. This command will make an Imagecontroller in the application.

php artisan make:controller ImageController

Add these two routes in your web.php file, this two routes will redirect to Imagecontroller for the view blade file.

<?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::get('image',[ImageController::class,'index']);
Route::post('image/convert',[ImageController::class,'convertImage'])->name('image.convert');

Step 4. ImageController

This is our ImageController for the define these two route methods in the controller, the first method will redirect to the blade file, and the second method will regenerate the image with the given extension and upload it to the storage in the app, after that it will redirect back with the success response.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function index()
    {
        return view('image');
    }

    public function convertImage(Request $request)
    {
        $image = $request->file('image');

        $ext = 'webp';

        $imageConvert = \Image::make($image->getRealPath())->stream($ext,100);

        \Storage::put('image/'.uniqid().'.'.$ext,$imageConvert); 

        return redirect('image')->withSuccess('Image convert successfully.');
    }
}

Step 5. Blade File

Image blade file for the uploaded image and regenerate with the new extension provided, so once you upload an image and submit it will generate a new image with the given defined extension and upload it in the server storage folder. just copy and paste your blade file and test your image extension with the other one's.

<!doctype html>
<html lang="en">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Image Convert In Laravel - Webappfix</title>
    </head>
    <body>
    <div class="container mt-5">
        @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        
        <div class="card">
        <div class="card-header">
            <h3 class="mb-0 p-0">Image Convert In Laravel - Webappfix</h3>  
        </div>
        <div class="card-body">
            <form action="{{ route('image.convert') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label>Image</label>
                <input type="file" name="image" class="form-control">
                <button type="submit" class="btn btn-primary mt-2">Upload Image</button>
            </div>
            </form>
        </div>
        </div>
    </div>
    <h1></h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
    </body>
</html>

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)