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
- Install and Configure Package
- Create a Controller
- Register Routes
- Create a Blade File
- 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/imageLaravel 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:
.....
'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 WaterMarkControllerOpen the controller from app>Http>Controllers and paste this code:
<?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:
<?php
Route::get('watermark-image', '[email protected]');
Route::get('watermark-text', '[email protected]');
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:
<!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. ?Share on Social Media
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***
Comments (0)