In this guide, I'll guide you through the process of adding watermarks to images in Laravel 10. We'll explore how to seamlessly integrate watermarks, both text and image-based, using the intervention/image package.
When you need to embed text onto images, whether it's important information, copyrighted content, your website name, or any other text, watermarking is the way to go.
In this tutorial, we'll utilize the PHP image intervention library to demonstrate how to add watermark text to images effectively.
Intervention Image is a PHP image handling and manipulation library providing an easier and more expressive way to create, edit, and compose images. The package includes ServiceProviders and Facades for easy Laravel integration.
Laravel 10 Add Watermark on Image using intervention/image
In this step, we will install laravel 10 using the following command. So, run the below command to the terminal.
composer create-project --prefer-dist laravel/laravel laravel_10_watermark_example
Then, we will install the intervention/image package using the composer command in laravel 10.
composer require intervention/image
Now, we will add providers and aliases in the app.php file. This step is optional.
config/app.php
<?php
return [
$providers => [
'Intervention\Image\ImageServiceProvider'
],
$aliases => [
'Image' => 'Intervention\Image\Facades\Image'
]
]
By default, Intervention Image uses PHP's GD library extension to process all images. If you want to switch to Imagick, you can pull a configuration file into your application by running one of the following artisan commands.
Publish configuration in Laravel
php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"
Here, we will create AddWatermarkImageController using the following command.
php artisan make:controller AddWatermarkImageController
app/Http/Controllers/AddWatermarkImageController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Image;
class AddWatermarkImageController extends Controller
{
public function index()
{
return view('index');
}
public function imageFileUpload(Request $request)
{
$this->validate($request, [
'file' => 'required|image|mimes:jpg,jpeg,png|max:4096',
]);
$image = $request->file('file');
$input['file'] = time().'.'.$image->getClientOriginalExtension();
$imgFile = Image::make($image->getRealPath());
$imgFile->text('© 2024 vidvatek.com', 100, 100, function($font) {
$font->size(50);
$font->color('#f1f1f1');
$font->align('center');
$font->valign('bottom');
})->save(public_path('/upload').'/'.$input['file']);
return back()
->with('success','File uploaded successfully ')
->with('fileName',$input['file']);
}
}
Note: Create an upload folder in your public directory, the path looks like public/upload.
We will define the routes to the web.php file
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AddWatermarkImageController;
Route::get('/', [AddWatermarkImageController::class, 'index']);
Route::post('/add-watermark', [AddWatermarkImageController::class, 'imageFileUpload'])->name('image.watermark');
Then, we create the index.blade.php file. So, add the following HTML to that file.
resources/views/index.blade.php
<!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>How to Add Watermark on Image using Laravel 10 - Vidvatek</title>
</head>
<body>
<div class="container">
<h1>How to Add Watermark on Image using Laravel 10 - Vidvatek</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 text-center">
<img src="/uploads/{{ Session::get('fileName') }}" width="100%"/>
</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>
You might also like:
- Read Also: Laravel 10 Resize Image before Uploading using Intervention
- Read Also: How to Create CRUD with Image Upload in Laravel 10
- Read Also: How to Upload Multiple Images in Laravel 10
- Read Also: How to Create Image Picker in React Native