Watermarking images can be a useful technique for adding branding or copyright information to your images.
If you want to add a watermark over image in Laravel web application then this tutorial is for you. In this tutorial, you will learn how to add watermark to Images in Laravel 10 apps using the Intervention package.Image using Intervention package in Laravel 10 apps.
How to Add Watermark on Image in Laravel 10
To add a watermark to images in Laravel 10 using the Intervention package, follow these steps:
- Step 1 – Setup New Laravel 10 App
- Step 2 – Setup Database with Laravel App
- Step 3 – Install and Configure Intervention Package
- Step 4 – Add Routes
- Step 5 – Create a Controller
- Step 6 – Create Blade View
- Step 7 – Make a Folder
- Step 8 – Start Development Server
Step 1 – Setup New Laravel 10 App
First of all, start your terminal to download or install Laravel 10 new setup. Execute the following command into it to install the new Laravel 10 app on your system:
composer create-project --prefer-dist laravel/laravel LaravelIntervention
Step 2 – Setup Database with Laravel App
After successfully install laravel app, visit your project root directory and find .env file. Then add database credential in this file, as shown below:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Step 3 – Install and Configure Intervention Package
In this step, you need to install laravel image intervention package for resizing the image size. So, open your terminal and execute the below given command to install it in your laravel apps:
composer require intervention/image
After successully install laravel image intervention package. 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' ] ]
Next migrate the table using the below command :
php artisan migrate
Step 4 – Add Routes
In this step, visit app/routes/ directory and open web.php file. Then add the following routes into it:
<?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');
Step 5 – Create a Controller
In this step, you need to create a controller file. So, open your terminal and execute the following command on it:
php artisan make:controller ImageFileController
Then visit to app/controllers/ImageFileController.php and add the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Image;
class ImageFileController extends Controller
{
public function index()
{
return view('my-images');
}
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('© 2017-2021 tutsmake.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 – Create Blade View
In this step, you need to create blade view file. So, visit /resources/views and create one file name my-images.blade.php 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 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>
Step 7 – Make a Folder
In this step, Visit the public directory and create one folder or directory name upload.
Go to public folder => first create folder name upload
Step 8 – Start Development Server
In this step, execute the following command to start your server locally:
php artisan serve
Then open your browser and hit the following URL on it:
http://127.0.0.1:8000/file-uploads
If you want to remove public or public/index.php from the URL In laravel apps, Click Me
Conclusion
Laravel 10 Image watermarking is the process of adding text information over the image. In this tutorial, you have learned how add text overly watermark on Image in Laravel 10 apps.
Recommended Laravel Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
