watermark Archives

In this tutorial, we will teach you how you can put a watermark on an image uploaded by a user. You might have seen websites that allow you to upload images, but when you try to download them, they put their watermark on your image and ask you to pay to remove it. So let’s learn how they do this.

First I am going to create a form where we will show the input type file to select the image. Its method will be POST and the action will be “index.php”. The encoding (enctype) type must be multipart/form-data. This is necessary for uploading files. Then we are going to show a label that says “select file” and an input type file. The name attribute on the input type file will be used on the PHP side. It will also have an attribute accept=”image/*”, which means this input field will accept only image type, for example, PNG or JPEG, etc, but no PDF or DOCX type of files will be selected in this field. Finally, the form will have a submit button. Submit button will have a name attribute so we can know when this form is submitted.

Select a file

<form method="POST" action="index.php" enctype="multipart/form-data">

	<p>
		<label>Select file</label>
		<input type="file" name="image" accept="image/*" />
	</p>

	<input type="submit" name="submit" value="Upload" />
</form>

If you run the code now, you will see a form with an input type file and a submit button. Now we need to write the PHP code to handle this form.

Apply the watermark

First, we will check if the form is submitted.

<?php

if (isset($_POST["submit"]))

Then we will save the user uploaded image in a file named “image.png” because, in order to put a watermark on it, the file must be stored in our server.

move_uploaded_file($_FILES["image"]["tmp_name"], "image.png");

Then we need to get this image as an object. So call imagecreatefromjpeg function if your image was a JPEG image, imagecreatefrompng if it is a PNG. Parameter will be the path of saved image file.

$image_obj = imagecreatefromjpeg("image.png");

Similarly, we will create an object of our watermark image, which is a PNG image.

$watermark = imagecreatefrompng("watermark.png");

Then we will define the margin from the right and from the bottom, since we do not want the watermark to stick to the corners, we want a little margin.

$margin_right = 10;
$margin_bottom = 10;

Then we are going to get the watermark image width and height in a separate variable.

$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);

Now comes the tricky part. We need to tell the X and Y coordinates of original image where we will place the watermark. The X position from left will be width of uploaded image, minus width of watermark image, minus margin from right.

$destination_x = imagesx($image_obj) - $watermark_width - $margin_right;

Similarly, the Y position from top will be height of uploaded image, minus height of watermark image, minus margin from bottom.

$destination_y = imagesy($image_obj) - $watermark_height - $margin_bottom;

Now we need to copy the watermark image in user uploaded image. The syntax of this function is:

// imagecopy(dst_im, src_im, dst_x, dst_y, src_x, src_y, src_w, src_h)

Our destination image is the image uploaded by user. Source image is the watermark image. Destination x and y are just we calculated, I will explain this as well. And source x and y will be zero, because we do not want any margin in our watermark image. And finally the width and height of our source image which is watermark image.

imagecopy($image_obj, $watermark, $destination_x, $destination_y, 0, 0, $watermark_width, $watermark_height);

Now let me explain the calculation we did above.

Explaining X, Y co-ordinates

width of user image = 2560
width of watermark image = 640
margin from right = 10

2560 - 640 - 10 = 1910 = x

height of user image = 1600
height of watermark image = 345
margin from bottom = 10

1600 - 345 - 10 = 1245 = y

First is destination_x variable. The width of image object is 2560px, minus the width of watermark is 640px, minus the margin right which is 10. That equals 1910, so our watermark will be placed at 1910 on X axis from left. Now come to destination_y variable, height of user uploaded image is 1600px, it will be different for each image because user can upload image of any resolution. I am writing these values as sample. So the 1600px is the height of user uploaded image. Minus the height of watermark, which is 345px. Minus margin from bottom that is 10. That equals 1245. So our watermark image will be placed at 1245 on Y axis from top.

1910 + 640 = 2550
1245 + 345 = 1590

Now when the watermark is placed at 1910 from left and it has a width of 640px, then that equals 2550 which is 10px less than the width of user image, which is 2560px. So there is a difference of 10px, which means there will be a margin of 10px from right. Similarly, when the watermark is placed at 1245 from the top and it has a height of 345px, then that equals 1590 which is again 10px less than the height of the user image, which is 1600px. So it will have a margin of 10px from the bottom.

Generating watermarked image

Now the watermark image object has been copied to the user uploaded image object using imagecopy function above. Now we need to generate that image.

imagepng($image_obj, "output.png");

The first parameter will be an image object, which is a user object along with a watermark object because the watermark image has been copied to it. And second, will be the path of the output file.

Finally, we are going to destroy the image objects we just created for user-uploaded images and watermark image to free up the memory.

imagedestroy($image_obj);
imagedestroy($watermark);

Also, we saved the user image using the move uploaded file function because we need the image to be stored before putting a watermark on it. Now the watermark is placed, so we have no need for the original user-selected picture, so we are going to delete it using the unlink function.

unlink("image.png");

If you run the code now, select an image, and upload it, you will see that the original image was saved as image.png and the output.png is being rendered for a few seconds. When the output.png is completely rendered then the original image.png was automatically deleted because we have used the unlink function.

Complete code

<?php

if (isset($_POST["submit"]))
{
	move_uploaded_file($_FILES["image"]["tmp_name"], "image.png");
	$image_obj = imagecreatefromjpeg("image.png");

	$watermark = imagecreatefrompng("watermark.png");

	$margin_right = 10;
	$margin_bottom = 10;

	$watermark_width = imagesx($watermark);
	$watermark_height = imagesy($watermark);

	$destination_x = imagesx($image_obj) - $watermark_width - $margin_right;
	$destination_y = imagesy($image_obj) - $watermark_height - $margin_bottom;

	// imagecopy(dst_im, src_im, dst_x, dst_y, src_x, src_y, src_w, src_h)
	imagecopy($image_obj, $watermark, $destination_x, $destination_y, 0, 0, $watermark_width, $watermark_height);

	// 2560 - 640 - 10 = 1910
	// 1600 - 345 - 10 = 1245

	// x = 1910 + 640 = 2550
	// y = 1245 + 345 = 1590

	imagepng($image_obj, "output.png");

	imagedestroy($image_obj);
	imagedestroy($watermark);

	unlink("image.png");
}

?>

The final image will be of the same quality as of original image. If you face any problems in following this, kindly mention them in the comments section below.

How you can also resize the image without stretching in PHP by following this tutorial.

[wpdm_package id=’1262′]

In this article, we will be using FFmpeg tool with PHP to add watermark on a video.

Watermark on video

Watermark (also known as overlay image) is an image that displays in a specific position throughout the video. It is important to display your brand logo along with your video. Also it serves as a material that this content has been provided by your brand. If you have ever used Microsoft Word, then you would probably be aware of what watermark is. In MS Word, you can display watermark in diagonal or horizontal format. That type of watermarks are used for documents only.

In terms of video, you cannot display this on whole video. So you need an image of lower resolution then your video so it can be placed in somewhere inside the video. Also, you need to position the overlay image in a proper location. The position of image should be so that user must not get distracted from your actual video. The recommended positions are either top left, right or bottom left or right.

FFmpeg

You need to download and install FFmpeg in your system. After installation, you can also add it in your environmental PATH variable. We are going to create a PHP script that will input 2 files from user, one video where watermark should be placed and second is the overlay image which will be placed throughout the video.

Creating layout

Create a file named index.php in your htdocs or www folder if you are using XAMPP or WAMP respectively. If you already have a live site with domain and hosting, you need to connect with your server using SSH and run all the commands at the root of your project. Also mare sure you have set the folder permission to read and write, otherwise FFmpeg will not be able to create a new video with overlay image. Paste the following code in index.php file:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

<div class="container" style="margin-top: 100px;">
	<div class="row">
		<div class="offset-md-3">
			
			<!-- creating the form -->
			<!-- apply encoding type to process file -->
			<form method="POST" action="add-overlay.php" enctype="multipart/form-data">
				
				<!-- creating video input file -->
				<div class="form-group">
					<label>Select video</label>
					<input type="file" name="video" class="form-control">
				</div>

				<!-- creating image input file -->
				<div class="form-group">
					<label>Select image</label>
					<input type="file" name="image" class="form-control">
				</div>

				<!-- create submit button -->
				<input type="submit" class="btn btn-primary" value="Add overlay">

			</form>

		</div>
	</div>
</div>

Add overlay image to video

Now we need to process the form i.e. to add selected image as overlay to selected video file and save the output as new file with same video and audio quality. The process involves 2 steps, first, as the selected image could be a very high quality image with very high resolution. So we need to resize the image to resolution without decreasing the quality. Secondly we will apply that resized image as overlay to video. Create a new file named “add-overlay.php” or same as action attribute in <form> tag. Paste the following code in newly created add-overlay.php file:

<?php

// first you have to get both input files in separate variables
$video = $_FILES["video"]["name"];
$image = $_FILES["image"]["name"];

// then you have to resize the selected image to lower resolution
$command = "/usr/local/bin/ffmpeg -i " . $image . " -s 128x128 output.jpeg";

// execute that command
system($command);

echo "Overlay has been resized";

// both input files has been selected
$command = "/usr/local/bin/ffmpeg -i " . $video . " -i output.jpeg";

// now apply the filter to select both files
// it must enclose in double quotes
// [0:v] means first input which is video
// [1:v] means second input which is resized image
$command .= " -filter_complex \"[0:v][1:v]";

// now we need to tell the position of overlay in video
$command .= " overlay=80:50\""; // closing double quotes

// save in a separate output file
$command .= " -c:a copy output.mp4";

// execute the command
system($command);

echo "Overlay has been added";

?>

Explore what more you can do with FFmpeg.

Tag: watermark

Watermark image after upload – PHP, No Library