Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
How to add watermark(image text) to image in laravel

How to add watermark(image/ text) to image in laravel 9 ?

Aman Jain, May 15, 2022May 15, 2022

In this tutorial i will show you add watermark(image/ text) to image in laravel 9. Sometimes for privacy or copyright of images we need to add watermark to the images, watermark can be a text or image. We will use laravel package to add watermark and i will show you multiple methods to add watermark. Using this we can also add some information to the image.

In this article i will use PHP intervention/image package to add watermark(image/ text) to image in laravel 9. This package has several methods to reduce, Resize , effects and many more. But in this topic we will cover add watermark(image/ text) to image in laravel 9.

Intervention Image is an open source PHP image handling and manipulation library. This library usage two most common image processing libraries GD Library and Imagick.

In this example we will create a simple example to add watermark(image/ text) to image in laravel 9. For this we will create a database, table, model, controller and simple view for html

Let’s start the tutorial of add watermark(image/ text) to image in laravel 9 with simple step by step

Step 1: Create a fresh laravel project

Open a terminal window and type below command to create a new project

composer create-project --prefer-dist laravel/laravel blog

You can also read this to start with new project

Step 2 : Install the package

I assume the you have already installed the laravel and basic connection of it like database connection and composer.

Now install the package using composer in laravel root directory, open the terminal in laravel root directory and run below command to install intervention/image the package. This package has good stars on github and has lot of fan base of artisans

composer require intervention/image

Register Providers & Aliases

Add the following code the config/app.php file

'providers' => [
  .......
  .......
  .......
   Intervention\Image\ImageServiceProvider::class,
 
 ],  
'aliases' => [ 
  .......
  .......
  .......
   'Image' => 'Intervention\Image\Facades\Image'
], 

Step 3 : Create a table and model

Now, for an example i am creating here a table using migration and then i am going to fill the data in it, so create model and migration

php artisan make:model Article -m

this will generate the model and migration file

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
    use HasFactory;
    
}

and migration file database/migrations/timestamp_create_articles_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
     public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->id();
            $table->string('email')->unique();;
            $table->string('title');
            $table->string('body')->nullable();
            $table->string('image');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('articles');
    }
}

and then migrate the migration

php artisan migrate

Step 3 : Create controller

Let’s create a controller and add a methods showArticle and addArticle

php artisan make:controller ArticleController

and add the below code

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Article;
use Illuminate\Support\Facades\Validator;

class ArticleController extends Controller
{
    public function showArticle(Request $request){

        $articles = Article::all();
        return view('articles.article',['articles'=>$articles]);
     }
 
     function addArticle(Request $request){
        
        $validator = Validator::make($request->all(),[
                        'title' => "required",
                        'email' => "required|email",
                        'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:4096',
                    ]);
        if ($validator->fails()) 
        {
            return redirect()->back()->withInput()->withErrors($validator->errors());
        }
        $file = $request->file("image");
         
         //create a random file name with time
        $fileName = time().rand(111111111,9999999999).'.'.$file->getClientOriginalExtension();
        $destinationPath= '/uploads/images';
         
        $storageDestinationPath=storage_path('app'.$destinationPath);
         
        if (!\File::exists( $storageDestinationPath)) {
            \File::makeDirectory($storageDestinationPath, 0755, true);
        }
        
          $img =   \Image::make($file->getRealPath());
 
          // use callback to define details
         $img->text('foo', 0, 0, function($font) {
    
           $font->file(public_path("fonts/OpenSans-Bold.ttf"));
            $font->size(24);
            $font->color('#ffffff');
            $font->align('center');
            $font->valign('left');
            $font->angle(0);
         });
         $img->save($storageDestinationPath."/".$fileName,40,"jpg");
       
         //  save image and name in database
           $Article=new Article();
           $Article->title=$request->title;
           $Article->email=$request->email;
           $Article->image= $destinationPath."/".$fileName;
           $Article->save();
           return back()
             ->with('success','You have successfully created the article with image.');
       
     }
}

In above code we used this code to add watermark in the image

$img->text('Simple text on image - Readerstacks', 200, 200, function($font) {
            $font->file(public_path("fonts/OpenSans-Bold.ttf"));
            $font->size(24);
            $font->color('#ffffff');
            $font->align('center');
            $font->valign('left');
            $font->angle(0);
 });

Note: Here $font->file(public_path("fonts/OpenSans-Bold.ttf")); is important if you remove the font file then size, angle won’t work.

You can read more about text here https://image.intervention.io/v2/api/text

And if you want to insert image then

$img->insert('public/watermark.png', 'bottom-right', 10, 10);

Step 4 : Create Symblink for Storage

This is an important step and i suggest you to not skip this step, if you are going to show images in your website because you must need to access the image to show it on website so open config\filesystems.php and add public_path('uploads') => storage_path('app/uploads') to links block

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default filesystem disk that should be used
    | by the framework. The "local" disk, as well as a variety of cloud
    | based disks are available to your application. Just store away!
    |
    */

    'default' => env('FILESYSTEM_DRIVER', 'public'),
    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
        ],

    ],
    'links' => [
        public_path('storage') => storage_path('app/public'),
        public_path('uploads') => storage_path('app/uploads'),
    ],

];

Since we are using in our controller this code

$destinationPath= '/uploads/images';
         
$storageDestinationPath=storage_path('app'.$destinationPath);

so we created a Symblink as

 public_path('uploads') => storage_path('app/uploads'),

Now run artisan command to run Symblink

php artisan storage:link

Or for shared hosting

Route::get('/artisan-link', function () {
    Artisan::call('storage:link');
});

NOTE: If you are using php artisan serve and virtual host to serve your application then above method will work perfectly but in case you are putting your public/index.php in root folder then you need to add public in URL. Example

URL for php artisan serve and virtual host will be and this will work perfectly

http://localhost:8000/uploads/images/16525039733751202249.png 

and you are putting your public/index.php in root folder then you need to add public in URL

http://localhost/projectname/public/uploads/images/16525039733751202249.png 

Step 4 : Create View File

Now, show the upload form in view file and also show the list of compressed images

resources/views/articles/article.blade.php

<!DOCTYPE html>
<html>

<head>
    <title> How to add watermark(image/ text) to image in laravel 9 - readerstacks.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h2> How to add watermark(image/ text) to image in laravel 9-readerstacks.com</h2>
            </div>
            <div class="panel-body">

                @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ $message }}</strong>
                </div>

                @endif
                <br><br>
                <form action="{{ url('add-article') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">

                        <div class="col-md-4">
                            <label>Title</label>
                            <input type="text" placeholder="Title" name="title" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label>Email</label>
                            <input type="email" placeholder="Email" name="email" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label>Image</label>
                             <input type="file" placeholder="Image" name="image" id="imgInp">
                              <img style="visibility:hidden"  id="prview" src=""  width=100 height=100 />
                      
                    </div>
                     </div>
                    <div class="row">



                        <div class="col-md-6">
                            <button type="submit" class="btn btn-success">Upload</button>
                        </div>

                    </div>
                </form>
                <br>
                <h2>All Articles</h2>
                <table class="table">
                    <tr>
                        <th>Name</th>
                        <th>Image</th>

                    </tr>
                    @foreach( $articles as $article)
                    <tr>
                        <td>{{$article->title}}</td>
                        <td>
                             <!-- in case of you are putting index.php in root folder -->
                             <!-- <img height="100" width=100 src="{{asset('public/'.$article->image)}}" /> -->
                            <img  src="{{asset($article->image)}}" />
                        </td>
                    </tr>
                    @endforeach
                </table>
            </div>
        </div>
    </div>
</body>
<script>
imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    prview.style.visibility = 'visible';

    prview.src = URL.createObjectURL(file)
  }
}
</script>
</html>


here we used {{asset($article->image)}} to render the image in web page.

Step 4: Create two routes in routes/web.php

One route for preview the html and another route for upload and compress the image.

routes/web.php

<?php

use App\Http\Controllers\ArticleController;
use Illuminate\Support\Facades\Route;


Route::get('/articles',[ArticleController::class,"showArticle"]);
Route::post('/add-article',[ArticleController::class,"addArticle"]);

I

Results Screenshot:

16526317155446630681
Image with Watermark

Also Read : How to create multiple size thumbs from image in laravel 8 ?

Related

Php Laravel Laravel 9 imageinterventionlaravelwatermark

Post navigation

Previous post
Next post

Related Posts

Php laravel custom validation

How to make custom validation in Laravel 8 ?

October 19, 2021October 28, 2021

In this tutorial we will learn to implement custom validation rule in Laravel 8. Laravel has too many validation rules but sometime we feel some rules are missing according to our project need. so, in this article we will learn to implement custom reusable validation rule and implement the username…

Read More
Php Unique Validation in laravel 8

Unique validation in Laravel with example

November 21, 2021June 17, 2022

Laravel also support validation for database operations. Laravel unique validation validates the table column uniqueness using unique validation. In this tutorial we will learn about the unique validation to table columns and also while updating the value too. you can use this to check the uniqueness of email, username ,…

Read More
Php How to run raw query in Laravel

How to run raw query laravel eloquent ?

February 12, 2022March 28, 2023

Sometimes in laravel we wanted to run raw query like select, insert, delete, alter etc. Laravel have multiple ways to run a raw query using select, prepare or statement method in db builder. In this article i will show you to run the raw query in laravel. To understand this…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Mastering Schedule Management with Laravel Zap
  • The Resilience of Nature: How Forests Recover After Fires
  • Understanding Laravel Cookie Consent for GDPR Compliance
  • Understanding High Vulnerabilities: A Critical Overview of the Week of May 12, 2025
  • Installing a LAMP Stack on Ubuntu: A Comprehensive Guide
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version