Laravel Add Watermark on Image

Today I am going to share how to add watermark on an image in Laravel. By using intervention image, we can easily add watermark on the image. So, let’s start:

Table of Contents

  1. Install and Configure Package
  2. Create a Controller
  3. Register Routes
  4. Create a Blade File
  5. Run the Project and Test

Step 1 : Install and Configure Package

We are going to use intervention/image package. To install this, go to your project folder using CMD and type this command:

composer require intervention/image

Laravel 5.4 or lower: After installation, we need to set provider and alias in config>app.php. Open app.php and add two lines in providers and aliases array like this:

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

Step 2 : Create a Controller

Let’s create a controller named “WaterMarkController”. Type this command to create the controller:

php artisan make:controller WaterMarkController

Open the controller from app>Http>Controllers and paste this code:

WaterMarkController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Image;

class WaterMarkController extends Controller
{
    public function imageWatermark()
    {
        $img = Image::make(public_path('images/background.png'));

        /* insert watermark at bottom-right corner with 10px offset */
        $img->insert(public_path('images/watermark.png'), 'bottom-right', 10, 10);

        $img->save(public_path('images/new-image.png'));

        $img->encode('png');
        $type = 'png';
        $new_image = 'data:image/' . $type . ';base64,' . base64_encode($img);

        return view('show_watermark', compact('new_image'));
    }

    public function textWatermark()
    {
        $img = Image::make(public_path('images/background.png'));

        $img->text('MyNotePaper', 710, 370, function ($font) {
            $font->file(public_path('font/amandasignature.ttf'));
            $font->size(30);
            $font->color('#f4d442');
            $font->align('center');
            $font->valign('top');
            $font->angle(0);
        });

        $img->save(public_path('images/new-image.png'));

        $img->encode('png');
        $type = 'png';
        $new_image = 'data:image/' . $type . ';base64,' . base64_encode($img);

        return view('show_watermark', compact('new_image'));
    }
}

I have created two methods. One for image watermark called imageWatermark() and another for text watermark textWatermark().

Step 3 : Register Routes

Open routes>web.php and define two routes:

WaterMarkController.php
<?php

Route::get('watermark-image', 'WaterMarkController@imageWatermark');
Route::get('watermark-text', 'WaterMarkController@textWatermark');

Step 4 : Create a Blade File

Navigate to resources>views and create a file called ”
show_watermark.blade.php”. Then open the file and paste this code:

show_watermark.blade.php
<!doctype html>
<html lang="en">
<head>
    <title>Laravel Add Watermark on Images</title>
</head>
<body style="margin-top: 40px; text-align: center;">

<h1>Laravel Add Watermark</h1>

<img src="{{$new_image}}" alt="Watermark">

</body>
</html>

Step 5 : Run the Project and Test

Now run the project and visit the http://localhost:8000/watermark-image route to see the image watermark output:

Visit http://localhost:8000/watermark-text to see the text watermark. For the text watermark, I’ve used Amanda Signature font.

You can see more integration way from Intervention Image’s official website.

Thank you.


Software Engineer | Ethical Hacker & Cybersecurity...

Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.