Laravel 10 add text watermark on image exmaple; Through this tutorial, i am going to show you how to add text watermark on images in Laravel 10 apps. And as well as, show you how to store watermark images in public directory.
A watermark is a message (usually a logo, stamp, or signature) superimposed onto an image, with a great deal of transparency. So, it’s still possible to visualize its presence without interrupting or preventing vision of the image that it protects.
Laravel 10 Add Text Overlay Watermark on Image Example
Use the below given steps to add text overlay watermark on image in Laravel 10 apps; is as follows:
- Step 1 – Installing Laravel 10 Application
- Step 2 – Configuring Database Details
- Step 3 – Install Image Intervention Library
- Step 4- Create Routes
- Step 5 – Creating Image Controller
- Step 6 – Creating Image Blade View
- Step 7- Start Development Server
Step 1 – Installing Laravel 10 Application
Execute the following command on terminal to install Laravel 10 apps:
composer create-project --prefer-dist laravel/laravel demo
Step 2 – Configuring Database Details
Open your downloaded Laravel 10 app into any text editor. Then find .env file and configure database detail like following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Step 3 – Install Image Intervention Library
Execute the following command on terminal to install image intervention library:
composer require intervention/image
Then 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' ] ]
Step 4 – Create Routes
Open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageFileController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::get('/file-upload', [ImageController::class, 'index']);
Route::post('/add-watermark', [ImageController::class, 'imageFileUpload'])->name('image.watermark');
Step 5 – Creating Image Controller
Create image upload controller by using the following command:
php artisan make:controller ImageController
The above command will create ImageController.php file, which is located inside demo/app/Http/Controllers/ directory.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Image;
class ImageController extends Controller
{
public function index()
{
return view('add-watermark');
}
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('© 2018-2022 laratutorials.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 – Creating Image Blade View
Ceate new blade view file that named add-watermark.blade.php inside resources/views directory 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 10 Image Manipulation Tutorial</title>
</head>
<body>
<div class="container mt-4" style="max-width: 600px">
<h2 class="mb-5">Laravel 10 Image Text Watermarking Example - Laratutorials.com</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 – Start Development Server
Execute the following command to start development server for your crop image before upload in laravel app:
php artisan serve
Then open your browser and fire the following url into your browser:
http://127.0.0.1:8000/file-upload
Conclusion
Laravel 10 add text watermark on images example; In this tutorial, you have learned how to add text watermark on images in Laravel 10 apps.