Laravel Image Text Watermarking Tutorial

Hi dev,

Today i will learn to the how to create a watermarking image in laravel 8. This example is so easy to use in laravel.So, this example to i am used in 'intervention/image' package is used and create a watermarking image. So you can easily used and create watermarking image text in laravel 6, laravel 7 and laravel 8 version.

So let's start to the example and follow to the my all step.

Step 1: Ceate a laravel new project

First step to create a new laravel project in following command through.

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

Step 2: Install composer require package

Second step to install composer package('intervention/image') in just following command through.

composer require intervention/image

Step 3: Configure package

Third step to intervention/image package is installed then register to the package in your config/app.php file.

App/config.php

<?php
return [
    $providers => [
        ......,

        'Intervention\Image\ImageServiceProvider::class'
    ],

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

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

Step 4: Create route

Fourth step to create a two routes in web.php file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageFileController;
  
/*
|--------------------------------------------------------------------------
| 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('file-upload', [ImageFileController::class, 'index']);
Route::post('add-watermark', [ImageFileController::class, 'imageFileUpload'])->name('image.watermark');

Step 5: Create controller

In this step to create a ImageFileController in just following command through. And then next write a code in store to image in your public directory.

php artisan make:controller ImageFileController

routes/web.php

<?php

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

class ImageFileController extends Controller
{
    public function index()
    {
        return view('image');
    }
 
    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']);         
    }
}

Step 6: Create blade file

Now last step to create a view file in image.blade.php in your view folder.

resources/views/image.blade.php

<!DOCTYPE html>
<html>
<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 Text Watermarking Example</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>

So, finally we are done with our code we can get below output.