Laravel 11 - Add Watermark to Images with Intervention Image
Laravel 11 - Add Watermark to Images with Intervention Image
In this tutorial, we will discuss how to add and customize watermarks on images in Laravel 11 using Image Intervention for easy protection during upload or processing.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through adding a watermark to images uploaded through a Laravel application using the Intervention Image package. After creating a fresh Laravel project, the package is installed and configured for image manipulation, including the use of Arial font stored in the public directory. The process involves creating an ImageController to manage image uploads, validate files, and apply customizable watermarks. A route is defined for processing the image, and the view is updated with a clean, responsive form for easy image uploads and automatic watermark downloads. This approach ensures a simple and effective way to integrate watermarking functionality into any Laravel project, enhancing user engagement with branded or protected images.
Step # 1 : Create a fresh Laravel project or use an existing one.
Global command to create a new Laravel project named watermark. This requires Laravel to be installed globally.
laravel new watermark
Or
Non-global command using Composer to create a new Laravel project.
composer create-project laravel/laravel --prefer-dist watermark
After running one of the above commands, you'll be prompted.
- Would you like to install the starter kit? — Select none.
- Select the testing framework. — Choose Pest.
- Select the database for your application. — Choose mysql.
- Run the default database migration? — Select yes.
Step # 2 : Access the project directory.
Open a terminal (e.g. : Git Bash) and navigate to the root directory of your Laravel project.
cd c:xampp/htdocs/watermark
Step # 3 : Install the Intervention Image package for image manipulation.
Use the following Composer command to install the package.
composer require intervention/image-Laravel
This command installs the Intervention Image package along with its Laravel integration. Intervention Image provides an easy-to-use image manipulation library for resizing, cropping, watermarking, and more. Ensure you are in the root directory of your Laravel project before running this command.
Step # 4 : Publish the configuration for the Intervention Image package.
Run the following Artisan command to publish the Intervention image configuration file.
php artisan vendor:publish --provider="Intervention\Image\Laravel\ServiceProvider"
This command publishes the configuration file for the Intervention Image package. It creates an image.php file in the config directory of your Laravel project. The configuration file allows you to customize settings such as the image driver (GD or Imagick).
Step 5: Copy the Arial Font and Place it in the Public Folder.
Create a fonts folder in the public directory of your Laravel project.
Windows : Locate the Arial font at C:\Windows\Fonts\arial.ttf. Copy the arial.ttf file and paste it into the public/fonts folder of your Laravel project.
macOS : Locate the Arial font at /Library/Fonts/Arial.ttf (system-wide) or /System/Library/Fonts/Arial.ttf (system-provided). Copy Arial.ttf and paste it into the public/fonts folder of your Laravel project.
Note: Adding the Arial font allows you to adjust the watermark font size. For this example, we'll use system fonts to save time, so there’s no need to download any additional fonts. If further customization is required, download the desired font from a font repository and place it in the appropriate directory.
Step # 6 : Create a controller for handling image watermarking.
Run the following Artisan command to generate the ImageController.
php artisan make:controller ImageController
After generating the controller, replace the content of ImageController.php with the following code.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Intervention\Image\Laravel\Facades\Image;
class ImageController extends Controller
{
public function addWatermark(Request $request)
{
// Validate the uploaded file
$request->validate([
'image' => 'required|image|mimes:jpg,jpeg,png|max:2048',
]);
// Open the uploaded image
$image = Image::read($request->file('image')->getPathname());
// Add text watermark using the Arial font from public/fonts folder
$image->text('Code Shortcut', $image->width() - 20, $image->height() - 100, function ($font){
$font->size(25); // Increase or Decrease
$font->color('ffffff'); // Set color to black
$font->align('right');
$font->valign('bottom');
$font->filename(public_path('fonts/arial.ttf')); // Use Arial font from public/fonts folder
});
// Generate a new filename for download
$filename = 'watermarked_' . $request->file('image')->getClientOriginalName();
// Return the watermarked image as a downloadable file
return response($image->encode())
->header('Content-Type', $request->file('image')->getMimeType())
->header('Content-Disposition', 'attachment; filename="' . $filename . '"');
}
}
This controller handles image uploads, validates the image, and applies a text watermark. The watermark uses the Arial font located in the public/fonts folder. The watermarked image is returned as a downloadable file
Step # 7 : Create a route to handle the watermark process.
First, import the ImageController class at the top of your routes/web.php file.
use App\Http\Controllers\ImageController;
Define routes for the home page and watermark processing.
Route::get('/', function () {
return view('welcome');
});
Route::post('/add-watermark', [ImageController::class, 'addWatermark']);
The GET route renders the welcome view as the home page.The POST route processes the image upload and applies the watermark using the addWatermark method in ImageController.
Step # 8 : Update the view.
Update the view to include a form for uploading an image and applying a watermark. Open resources/views/welcome.blade.php and replace its content with the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shortcut - Add Watermark</title>
<!-- Link to Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white">
<div class="min-h-screen flex items-center justify-center">
<div class="bg-white shadow-lg rounded-lg w-full max-w-3xl p-8">
<h2 class="text-3xl font-semibold text-center mb-6 text-gray-900">Code Shortcut - Add Watermark</h2>
<!-- Form -->
<form action="{{ url('/add-watermark') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
@csrf
<div>
<label for="image" class="block text-lg font-medium text-gray-900">Select an image to add watermark</label>
<input type="file" name="image" id="image" accept="image/png, image/jpeg" required
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 text-gray-900">
</div>
<div>
<button type="submit"
class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
Add Watermark
</button>
</div>
</form>
</div>
</div>
</body>
</html>
This view provides a simple form for uploading an image. Tailwind CSS is used for styling to create a clean and responsive interface. The form uses the POST method to send the image to the /add-watermark route for processing.
Step # 9 : It's time to test your watermark functionality.
Start the Laravel development server by running the following command.
php artisan serve
This command starts the built-in Laravel development server. Once the server is running, open your browser and visit
127.0.0.1:8000
You should see the upload form on the home page. Select an image and click the Add Watermark button. The image will be processed, and a watermarked version will be downloaded automatically.
You can modify the font size, color, or alignment in ImageController to customize the watermark according to your needs.
Conclusion
By following this process, you can easily integrate image watermarking functionality into your Laravel application. The Intervention Image package makes it simple to manipulate images, and the ability to customize watermarks provides flexibility. With this setup, users can upload images, apply watermarks, and download the processed images with ease. This solution can be extended further for more complex image manipulations, ensuring scalability for various applications such as content management systems, media platforms, or e-commerce sites where watermarked images are necessary for brand protection.
For more details please refer to the package documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments