Laravel 8 Add Text Overlay Watermark on Image Example

Laravel 8 Add Text Overlay Watermark on Image Example

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

Recommended:-Laravel Try Catch

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *