Blog

Laravel 11 Add Watermark on Image Example | websolutioncode.com
Laravel 11 Add Watermark on Image Example | websolutioncode.com

Laravel 11 Add Watermark on Image Example

Adding a watermark to an image is a common requirement in many web applications to protect images from unauthorized use or to brand them. Laravel 11, with its robust and developer-friendly features, makes it easy to implement such functionalities. In this article, we will go through the process of adding a watermark to an image in Laravel 11 step-by-step.

Prerequisites

Before we start, ensure you have the following:

  1. Laravel 11 installed on your system.
  2. Composer installed.
  3. Basic knowledge of Laravel and PHP.

Step 1: Set Up Your Laravel Project

First, create a new Laravel project if you don’t have one already:

composer create-project --prefer-dist laravel/laravel watermark-example

Navigate to the project directory:

cd watermark-example

Step 2: Install Intervention Image Package

We will use the Intervention Image package to handle image processing in Laravel. To install it, run the following command:

composer require intervention/image

Next, add the service provider to your config/app.php file:

'providers' => [
    // Other service providers...
    Intervention\Image\ImageServiceProvider::class,
],

'aliases' => [
    // Other aliases...
    'Image' => Intervention\Image\Facades\Image::class,
],

Step 3: Create a Controller

Create a new controller for handling image uploads and watermarking:

php artisan make:controller ImageController

Open the newly created ImageController.php file and add the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Image;

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

    public function upload(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $image = $request->file('image');
        $input['imagename'] = time().'.'.$image->extension();

        $destinationPath = public_path('/images');
        $img = Image::make($image->path());
        $img->insert(public_path('/watermark.png'), 'bottom-right', 10, 10);
        $img->save($destinationPath.'/'.$input['imagename']);

        return back()
            ->with('success', 'Image uploaded successfully.')
            ->with('imageName', $input['imagename']);
    }
}

Step 4: Create Routes

Open the routes/web.php file and add the following routes:

use App\Http\Controllers\ImageController;

Route::get('upload', [ImageController::class, 'index']);
Route::post('upload', [ImageController::class, 'upload'])->name('image.upload');

Step 5: Create Blade View

Create a new Blade view file named upload.blade.php in the resources/views directory and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Add Watermark on Image Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <h2>Laravel 11 Add Watermark on Image Example</h2>

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <strong>{{ $message }}</strong>
        </div>
        <div class="row">
            <div class="col-md-4">
                <img src="/images/{{ Session::get('imageName') }}" class="img-fluid"/>
            </div>
        </div>
    @endif

    <form action="{{ route('image.upload') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label for="image">Choose Image</label>
            <input type="file" name="image" class="form-control" id="image">
            @error('image')
                <div class="alert alert-danger mt-2">{{ $message }}</div>
            @enderror
        </div>
        <button type="submit" class="btn btn-primary">Upload Image</button>
    </form>
</div>
</body>
</html>

Step 6: Place the Watermark Image

Make sure you have a watermark image named watermark.png placed in the public directory of your Laravel project. This will be used as the watermark.

Step 7: Testing the Application

Start the Laravel development server:

php artisan serve

Open your web browser and navigate to http://localhost:8000/upload. You should see an upload form. Choose an image and click the “Upload Image” button. If everything is set up correctly, your image will be uploaded with a watermark added to it.

Conclusion

In this article, we have learned how to add a watermark to an image in Laravel 11 using the Intervention Image package. This example can be extended and customized as needed for your specific use case. Happy coding!

Tags: ,