Laravel 11 Add Text Overlay Watermark on Image Tutorial

Laravel 11 add text watermark on image exmaple; Through this tutorial, i am going to show you how to add text watermark on images in Laravel 11 apps. And as well as, show you how to store watermark images in public directory.

A watermark is a message (usually a logo, stamp, or signature) superimposed onto an image, with a great deal of transparency. So, it’s still possible to visualize its presence without interrupting or preventing vision of the image that it protects.

Laravel 11 Add Text Overlay Watermark on Image Example

Use the below given steps to add text overlay watermark on image in Laravel 11 apps; is as follows:

  • Step 1 – Installing Laravel 11 Application
  • Step 2 – Configuring Database Details
  • Step 3 – Install Image Intervention Library
  • Step 4- Create Routes
  • Step 5 – Creating Image Controller
  • Step 6 – Creating Image Blade View
  • Step 7- Start Development Server

Step 1 – Installing Laravel 11 Application

Execute the following command on terminal to install Laravel 11 apps:

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

Step 2 – Configuring Database Details

Open your downloaded Laravel 11 app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

php artisan migrate

Step 3 – Install Image Intervention Library

Execute the following command on terminal to install image intervention library:

 composer  require intervention/image 

Then register image intervention package to providers and alies go to app/config/app.php, as shown below:

<?php

return [

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

		'Intervention\Image\ImageServiceProvider'
	],

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

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

]

Step 4 – Create Routes

Open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

<?php

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

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

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

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

Step 5 – Creating Image Controller

Create image upload controller by using the following command:

php artisan make:controller ImageController

The above command will create ImageController.php file, which is located inside demo/app/Http/Controllers/ directory.

<?php

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


class ImageController extends Controller
{

    public function index()
    {
        return view('add-watermark');
    }
 
    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('© 2018-2022 laratutorials.com - 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']);         
    }
}

Step 6 – Creating Image Blade View

Ceate new blade view file that named add-watermark.blade.php inside resources/views directory and add the following code into it:

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

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

<body>
    <div class="container mt-4" style="max-width: 600px">
        <h2 class="mb-5">Laravel 11 Image Text Watermarking Example - Laratutorials.com</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>

Step 7 – Start Development Server

Execute the following command to start development server for your crop image before upload in laravel app:

php artisan serve

Then open your browser and fire the following url into your browser:

http://127.0.0.1:8000/file-upload

Conclusion

Laravel 11 add text watermark on images example; In this tutorial, you have learned how to add text watermark on images in Laravel 11 apps.

Recommended Laravel Tutorials

Leave a Comment