Image watermarking is the process of text overlay watermark on Image. mIt might display copyright information, any important information on the images.
This is also known as a digital signature, over and above, that used to verify the authenticity of the content.
In this Laravel image watermarking tutorial, we will share how to add text overlay watermark onto the image in the laravel application. To add the watermarking text to the image, we will take the help of the PHP image intervention library.
Intervention Image is a profound open-source library especially used for image manipulation in PHP-based projects.
It offers pragmatic solutions to edit an image in drastically less time, and it comes with two sublime processing libraries, Imagick even more GD library.
How to Add Watermark on Image in Laravel 9
- 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-demoInstall 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/imageUpdate 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 ImageFileControllerFurthermore, 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 servehttp://127.0.0.1:8000/file-uploads 
Conclusion
We let the cat out of the bag; earlier, we created a simple feature to resize the image after uploading in laravel, and right after that, we shared how to add a watermark on the image in laravel.
It seems like the best of both worlds. However, you get once in a blue moon image manipulation tasks, but its great to get a solution in advance. We hope this tutorial will help you, and it has been like a piece of cake.
