Making an Ajax PHP Watermarker Script ...

In this post, I will show you how to make an Ajax PHP Watermarker script. So, all a user will have to do is select a file from a folder, enter his watermark text and watermark them instantly using Ajax.

Live Demo

You can see a demo of the project located here. http://www.web-development-tutorials.com/demo/AjaxWatermark/

Just choose an image from the drop down menu, enter some text, and click Watermark It.

Game Plan

This project is going to be a good challenge, but don’t worry, it’s a piece of cake for you, because you are smart like that ;).

Here’s the skeleton of the script we will be making.
/index.php
/images/
/php/
/php/functions.php
/php/Watermak.php
/php/controller.php
/js/
/js/jquery.js

The index.php is the file you would load in the web browser. And from this web page you would choose an image from the drop down menu, and watermark it with your desired text.

In the images folder we will store all our images which we want to watermark.

functions.php file will have just one function which grabs a list of files from the images folder. Watermark.php is a class I wrote to watermark any given image with any given text. And controller.php is the file that calls Watermark.php file, and watermarks a file accordingly.

And like most of the times, this time we will use jQuery to speed things up in javascript.
/php/Watermark.php

This is the brain of this whole script. Using this class you can watermark any image you want.
view plaincopy to clipboardprint?

   1. <?php 
   2.  
   3. class WaterMarker 
   4. { 
   5.     var $ImageFileName; //the name of the image file 
   6.     var $image;         //image data 
   7.     var $watermark;     //watermark text data (as an image) 
   8.     var $newimage;      //image with a watermark 
   9.  
  10.     var $ImageHeight;   //height of the original image 
  11.     var $ImageWidth;    //width of the original image 
  12.  
  13.     var $WatermarkHeight;   //height of the watermark image 
  14.     var $WatermarkWidth;    //width of the watermark image 
  15.  
  16.     function WaterMarker($ImageToWorkWith, $WaterMarkText) 
  17.     { 
  18.         $this->image = imagecreatefromjpeg("./../images/".$ImageToWorkWith); //load the image we are working with 
  19.         $this->ImageHeight = imagesy($this->image);   //get it is height 
  20.         $this->ImageWidth = imagesx($this->image);    //get it is width 
  21.  
  22.         $this->watermark = imagecreatetruecolor($this->ImageWidth, 30);   //make a watermark image 
  23.         $text_color = imagecolorallocate($this->watermark, 245, 0, 0);   //color the text 
  24.         imagestring($this->watermark, 5, 10, 10,  $WaterMarkText, $text_color); //write the text in the watermark image 
  25.         $this->WatermarkHeight = imagesy($this->watermark);   //get the watermark image height 
  26.         $this->WatermarkWidth = imagesx($this->watermark);    //get the watermak image width 
  27.     } 
  28.  
  29.     function Watermark() 
  30.     { 
  31.         $TargetY = $this->ImageHeight - $this->WatermarkHeight - 3; //finding the height to paste the watermark on 
  32.         $TargetX = $this->ImageWidth - $this->WatermarkWidth - 3; //finding the width of the watermark. 
  33.  
  34.         //watermark the image 
  35.         imagecopymerge($this->image, $this->watermark, $TargetX, $TargetY, 0, 0, $this->WatermarkWidth, $this->WatermarkHeight, 100); 
  36.     } 
  37.  
  38.     function GetImage() 
  39.     { 
  40.         imagejpeg($this->image); //Display the image 
  41.         imagedestroy($this->image);  //destroy the image to free up ram 
  42.     } 
  43. } 
  44.  
  45. ?> 

<?php

class WaterMarker
{
 var $ImageFileName; //the name of the image file
 var $image;   //image data
 var $watermark;  //watermark text data (as an image)
 var $newimage;  //image with a watermark

 var $ImageHeight; //height of the original image
 var $ImageWidth; //width of the original image

 var $WatermarkHeight; //height of the watermark image
 var $WatermarkWidth; //width of the watermark image

 function WaterMarker($ImageToWorkWith, $WaterMarkText)
 {
  $this->image = imagecreatefromjpeg("./../images/".$ImageToWorkWith); //load the image we are working with
  $this->ImageHeight = imagesy($this->image); //get it is height
  $this->ImageWidth = imagesx($this->image); //get it is width

  $this->watermark = imagecreatetruecolor($this->ImageWidth, 30); //make a watermark image
  $text_color = imagecolorallocate($this->watermark, 245, 0, 0); //color the text
  imagestring($this->watermark, 5, 10, 10,  $WaterMarkText, $text_color); //write the text in the watermark image
  $this->WatermarkHeight = imagesy($this->watermark); //get the watermark image height
  $this->WatermarkWidth = imagesx($this->watermark); //get the watermak image width
 }

 function Watermark()
 {
  $TargetY = $this->ImageHeight - $this->WatermarkHeight - 3; //finding the height to paste the watermark on
  $TargetX = $this->ImageWidth - $this->WatermarkWidth - 3; //finding the width of the watermark.

  //watermark the image
  imagecopymerge($this->image, $this->watermark, $TargetX, $TargetY, 0, 0, $this->WatermarkWidth, $this->WatermarkHeight, 100);
 }

 function GetImage()
 {
  imagejpeg($this->image); //Display the image
  imagedestroy($this->image); //destroy the image to free up ram
 }
}

?>

/php/functions.php

This file contains only one function, to grab a list of the files in the images directory.
view plaincopy to clipboardprint?

   1. <?php 
   2.  
   3. function LoadImageFiles($Path) 
   4. { 
   5.     $Files = array();   //array to store file names 
   6.  
   7.     $Handler = opendir($Path);  //open the target directory 
   8.  
   9.     while (false !== ($file = readdir($Handler))) 
  10.     { 
  11.         //Don list subdirectories 
  12.         if (!is_dir("$Path/$file")) 
  13.             $Files[] = $file; 
  14.     } 
  15.  
  16.     return $Files; //return the file list array 
  17. } 
  18.  
  19. ?> 

<?php

function LoadImageFiles($Path)
{
 $Files = array(); //array to store file names

 $Handler = opendir($Path); //open the target directory

 while (false !== ($file = readdir($Handler)))
 {
  //Don list subdirectories
  if (!is_dir("$Path/$file"))
   $Files[] = $file;
 }

 return $Files; //return the file list array
}

?>

/php/controller.php

This file is loaded in the browser, and it outputs an image with watermark on it.
view plaincopy to clipboardprint?

   1. <?php 
   2.  
   3. $image = strip_tags(trim($_GET[img]));    //get the image file name 
   4. $watermark = strip_tags(trim($_GET[wm])); //get the watermark text 
   5.  
   6. if(!emptyempty($image) && !emptyempty($watermark)) 
   7. { 
   8.     require(Watermark.php);   //load the watermark class 
   9.  
  10.     $watermark = new WaterMarker($image, $watermark);   //instantiate the class 
  11.     $watermark->Watermark(); //watermark the image 
  12.  
  13.     header(content-type: image/jpeg;);    //Display the file as jpeg  header(Content-Disposition: attachment; filename=".$image.");   //set the file name of the image 
  14.     $watermark->GetImage();  //Display the image 
  15. } 
  16.  
  17. ?> 

 Original Source:
http://www.web-development-tutorials.com/ajax-and-php/making-an-ajax-php-watermarker-script.html