Laravel 8/7/6 Image watermarking is the process of adding text information over the image. In this tutorial, you will learn how add text overly watermark on Image in laravel 8 apps.
And also you will learn how to resize images using the image intervention package before store images into database and folder in laravel apps.
Note that, image watermarking is the process of adding text information to the image; It may display copyright information, any important information on the images. It is also known as digital signature, which is used to verify the authenticity of the content.
And this tutorial aims to guide you on how to add the watermarking text to the image in laravel apps using the PHP image intervention library.
How to Add Watermark on Images in Laravel Apps
Follow the following steps and add text overly watermark on Image in laravel apps:
- Step 1 – Install Laravel App
- Step 2 – Connecting App to Database
- Step 3 – Install PHP Image Intervention Package
- Step 4 – Add Routes
- Step 5 – Create Controller
- Step 6 – Create Blade View
- Step 7 – Make Folder
- Step 8 – Start Development Server
Step 1 -Install Laravel App
First of all, you need to execute the following command on your terminal to download laravel fresh setup:
composer create-project --prefer-dist laravel/laravel LaravelIntervention
Step 2 – Connecting App to Database
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 PHP Image 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 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 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, execurte the following command to start your server locally:
php artisan serve
Then open your brower 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 URL In laravel apps, Click Me
Conclusion
Laravel 8/7/6 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 8 apps.
Recommended Laravel Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
