Laravel 8 Add Text Overlay Watermark on Image Tutorial

In this Laravel image watermarking tutorial, we will see how to add text overlay watermark onto the image in the laravel 8 application.

To add the watermarked text to the image, we will take the help of the PHP image intervention library.

Image watermarking is the process of adding text info over the image; it might display copyright info, any important info on the images.

This is also known as a digital sign, over and above, that used to verify the authenticity of the content.

Intervention Image is a profound open source lib especially used for image manipulation in PHP based projects. It offers pragmatic solution to edit an image in drastically less time, and it comes with two sublime processing lib Imagic even more GD library.

How to Add Watermark on Image in Laravel

Step 1: Create Laravel Project
Step 2: Install PHP Image Intervention Package
Step 3: Update Image Intervention in Laravel
Step 4: Create and Set Up Controller
Step 5: Register New Routes
Step 6: Create File Upload View File
Step 7: Start Laravel Application

Create Laravel Project

It is obvious to start with installing a new laravel application obviously; this step is like a piece of cake; however, you may ignore this step if the app is already downloaded.

composer create-project --prefer-dist laravel/laravel laravel-demo

Install PHP Image Intervention Package

Ideally, this step reveals how to add a PHP intervention image library into the laravel app, well its no rocket science. You can invoke the installation process with the given below single command.

composer require intervention/image

Update Image Intervention in Laravel

Now, the image intervention package is installed, then it is spontaneous that we register the essential classes in the providers and aliases array within the config/app.php file.

<?php

return [

	$providers => [
		......,
		......,

		'Intervention\Image\ImageServiceProvider'
	],

	$aliases => [
		......,
		......,

		'Image' => 'Intervention\Image\Facades\Image'
	]

]

Create and Set Up Controller

Next, run command to generate controller file.

php artisan make:controller ImageFileController

Furthermore, get into the newly generated app/Http/Controllers/ImageFileController.php file and add the code.

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Image;


class ImageFileController extends Controller
{

    public function index()
    {
        return view('welcome');
    }
 
    public function imageFileUpload(Request $request)
    {
        $this->validate($request, [
            'file' => 'required|image|mimes:jpg,jpeg,png,gif,svg|max:4096',
        ]);

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

        $imgFile = Image::make($image->getRealPath());

        $imgFile->text('© 2016-2020 positronX.io - All Rights Reserved', 120, 100, function($font) { 
            $font->size(35);  
            $font->color('#ffffff');  
            $font->align('center');  
            $font->valign('bottom');  
            $font->angle(90);  
        })->save(public_path('/uploads').'/'.$input['file']);          

        return back()
        	->with('success','File successfully uploaded.')
        	->with('fileName',$input['file']);         
    }
}

Ensure that you have created an uploads folder into the public directory; after uploading the image, the files will get into the public/uploads directory.

The text() method is used to write text on the image; you can set the basepoint of the initial character using the x, y position. Moreover, it is easy to include more details such as font-file, font size, and text alignment. Here are the full options that you can try with the image intervention library.

Register New Routes

Subsequently, get into the routes/web.php; in this file, you need to add two routes. These routes handle displaying the view template at the same time, manipulating the image.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageFileController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/

Route::get('/file-upload', [ImageFileController::class, 'index']);

Route::post('/add-watermark', [ImageFileController::class, 'imageFileUpload'])->name('image.watermark');

Create File Upload View File

The following code snippet creates a file upload form with the help of the Bootstrap 5 form control component. In the form tag, we define the route name, which makes the request to create a watermark on the image. Simultaneously, we are showing the processed image after image uploading.

Update resources/views/welcome.blade.php file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Laravel Image Manipulation Tutorial</title>
</head>

<body>
    <div class="container mt-4" style="max-width: 600px">
        <h2 class="mb-5">Laravel Image Text Watermarking Example</h2>

        <form action="{{route('image.watermark')}}" enctype="multipart/form-data" method="post">
            @csrf
            @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <strong>{{ $message }}</strong>
            </div>


            <div class="col-md-12 mb-3 text-center">
                <strong>Manipulated image:</strong><br />
                <img src="/uploads/{{ Session::get('fileName') }}" width="600px"/>
            </div>
            @endif

            @if (count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <div class="mb-3">
                <input type="file" name="file" class="form-control"  id="formFile">
            </div>

            <div class="d-grid mt-4">
                <button type="submit" name="submit" class="btn btn-primary">
                    Upload File
                </button>
            </div>
        </form>
    </div>
</body>

</html>

Start Laravel Application

Ultimately, this is the last step; we have to kill the two birds with one stone in this step. First, start the laravel development server, then copy the manifested url on the terminal and run the app on the browser.

php artisan serve

http://127.0.0.1:8000/file-uploads