How to Add Watermark on Image in Laravel 11

Websolutionstuff | Aug-21-2024 | Categories : Laravel

Hello, laravel web developers! In this article, we'll see how to add a watermark on the image in laravel 11. Here, we'll use the Intervention/Image Composer package. Intervention Image is the most popular open-source PHP image processing library.

It provides an easy and expressive way to edit images and supports PHP's two most common image-processing libraries GD Library and Imagick.

The Intervention/Image package is a powerful PHP library for image manipulation, allowing users to resize, crop, and apply various filters to images with ease. It supports multiple image formats, including JPEG, PNG, and GIF, making it an essential tool in web development for handling and editing images before they are displayed on websites.

In this example, we will install the Intervention/Image package. Intervention/Image provides methods to add a watermark to an image using the read() and place() methods.

Laravel 11 Add Watermark on Image Example

laravel 11 add watermark on image

Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel example-app

Step 2: Install Intervention Image Package

Next, we'll install the intervention/image-laravel composer package using the following command.

composer require intervention/image-laravel

Step 3: Define Routes

Then, we'll define the routes in the web.php file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageController;
  
Route::get('image-upload', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('image.store');

Step 4: Create Controller File

Now, we'll create a controller file using the following command.

php artisan make:controller ImageController

app/Http/Controllers/ImageController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use Intervention\Image\Laravel\Facades\Image;
  
class ImageController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(): View
    {
        return view('image-upload');
    }
        
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request): RedirectResponse
    {
        $this->validate($request, [
            'image' => ['required'],
        ]);
        
        $imageName = time().'.'.$request->image->extension();  

        $img = Image::read($request->image->path());

        $logo = public_path('logo.png');
        $img->place($logo, 'bottom-right', 10, 10);

        $img->save(public_path('images/'). $imageName);
        
        return back()->with('success', 'You have successfully upload image.')
                     ->with('image', $imageName); 
    }
}

Note: create a images folder in the public folder. and add a logo.png file in the public folder.

Step 5: Create a Blade File

Next, we'll create a blade file and create a form to upload images.

resources/views/image-upload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How to Add Watermark on Image in Laravel 11 - Websolutionstuff</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
        
<body>
<div class="container">
  
    <div class="card mt-5">
        <h3 class="card-header p-3"><i class="fa fa-star"></i> How to Add Watermark on Image in Laravel 11 - Websolutionstuff</h3>
        <div class="card-body">

            @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-block">
                    <strong>{{ $message }}</strong>
                </div>
                <img src="images/{{ Session::get('image') }}">
            @endif
            
            <form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
        
                <div class="mb-3">
                    <label class="form-label" for="inputImage">Image:</label>
                    <input 
                        type="file" 
                        name="image" 
                        id="inputImage"
                        class="form-control @error('image') is-invalid @enderror">
        
                    @error('image')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
         
                <div class="mb-3">
                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
                </div>
             
            </form>
        </div>
    </div>
</div>
</body>
      
</html>

Step 6: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.