Watermarking made DEAD SIMPLE (tutorial )

[SmokeyTheBear]

People always ask about watermarking programs so i figured i would share a DEAD SIMPLE method for batch watermarking your images on the fly with php.

#1 reason to use php is because its flexible.. allowing you to offer different watermarks depending on who is viewing the pictures. for example it could be as simple as displaying different transparency of the logo if the picture is hotlinked than when on your own site (i.e. blatent logo when hotlinked , lighter logo when on your site ) or you could go clever and show random logos annd random large messages when the pictures are hotlinked.

Ok so heres how it works, in this example your site will be called "www.yoursite.com" your secret folder the images will be kept will be called "secret" and the follder this script is in is called "script"

so path to script would be
yoursite.com/script/

secret path of images would be
yoursite.com/script/secret/

first place a test jpg in the secret folder
yoursite.com/script/secret/test.jpg like that
then place your logo, name it "watermark.gif" in the script folder
yoursite.com/script/watermark.gif like that
then place a ttf file called font.ttf in the script folder
yoursite.com/script/font.ttf like that
(ttf is true type font , theres some in your windows font folder if you dont have one )

then copy and save the following as water.php and place it in the scripts folder
yoursite.com/script/water.php like that

<?php
class watermark{
 
      # given two images, return a blended watermarked image
function create_watermark( $main_img_obj, $watermark_img_obj, $alpha_level = 100 ) {
      $alpha_level      /= 100;     # convert 0-100 (%) alpha to decimal
 
      # calculate our images dimensions
      $main_img_obj_w   = imagesx( $main_img_obj );
      $main_img_obj_h   = imagesy( $main_img_obj );
      $watermark_img_obj_w    = imagesx( $watermark_img_obj );
      $watermark_img_obj_h    = imagesy( $watermark_img_obj );
      
      # determine center position coordinates
      $main_img_obj_min_x     = floor( ( $main_img_obj_w) - ( $watermark_img_obj_w) );
      $main_img_obj_max_x     = ceil( ( $main_img_obj_w / 2 ) + ( $watermark_img_obj_w / 2 ) );
      $main_img_obj_min_y     = floor( ( $main_img_obj_h ) - ( $watermark_img_obj_h ) );
      $main_img_obj_max_y     = ceil( ( $main_img_obj_h / 2 ) + ( $watermark_img_obj_h / 2 ) ); 
      
      # create new image to hold merged changes
      $return_img = imagecreatetruecolor( $main_img_obj_w, $main_img_obj_h );
 
      # walk through main image
      for( $y = 0; $y < $main_img_obj_h; $y++ ) {
      for( $x = 0; $x < $main_img_obj_w; $x++ ) {
            $return_color     = NULL;
            
            # determine the correct pixel location within our watermark
            $watermark_x      = $x - $main_img_obj_min_x;
            $watermark_y      = $y - $main_img_obj_min_y;
            
            # fetch color information for both of our images
            $main_rgb = imagecolorsforindex( $main_img_obj, imagecolorat( $main_img_obj, $x, $y ) );
            
            # if our watermark has a non-transparent value at this pixel intersection
            # and we're still within the bounds of the watermark image
            if (  $watermark_x >= 0 && $watermark_x < $watermark_img_obj_w &&
                              $watermark_y >= 0 && $watermark_y < $watermark_img_obj_h ) {
                  $watermark_rbg = imagecolorsforindex( $watermark_img_obj, imagecolorat( $watermark_img_obj, $watermark_x, $watermark_y ) );
                  
                  # using image alpha, and user specified alpha, calculate average
                  $watermark_alpha  = round( ( ( 127 - $watermark_rbg['alpha'] ) / 127 ), 2 );
                  $watermark_alpha  = $watermark_alpha * $alpha_level;
            
                  # calculate the color 'average' between the two - taking into account the specified alpha level
                  $avg_red          = $this->_get_ave_color( $main_rgb['red'],            $watermark_rbg['red'],        $watermark_alpha );
                  $avg_green  = $this->_get_ave_color( $main_rgb['green'],      $watermark_rbg['green'],      $watermark_alpha );
                  $avg_blue         = $this->_get_ave_color( $main_rgb['blue'],      $watermark_rbg['blue'],       $watermark_alpha );
                  
                  # calculate a color index value using the average RGB values we've determined
                  $return_color     = $this->_get_image_color( $return_img, $avg_red, $avg_green, $avg_blue );
                  
            # if we're not dealing with an average color here, then let's just copy over the main color
            } else {
                  $return_color     = imagecolorat( $main_img_obj, $x, $y );
                  
            } # END if watermark
 
            # draw the appropriate color onto the return image
            imagesetpixel( $return_img, $x, $y, $return_color );
 
      } # END for each X pixel
} # END for each Y pixel 
            
      # return the resulting, watermarked image for display
      return $return_img;
 
} # END create_watermark()
      
      # average two colors given an alpha
      function _get_ave_color( $color_a, $color_b, $alpha_level ) {
      return round( ( ( $color_a * ( 1 - $alpha_level ) ) + ( $color_b  * $alpha_level ) ) );
} # END _get_ave_color()    
 
      # return closest pallette-color match for RGB values
    function _get_image_color($im, $r, $g, $b) {
      $c=imagecolorexact($im, $r, $g, $b);
      if ($c!=-1) return $c;
      $c=imagecolorallocate($im, $r, $g, $b);
      if ($c!=-1) return $c;
      return imagecolorclosest($im, $r, $g, $b);
} # EBD _get_image_color()

 
} # END watermark API
?>

now copy and save the following as index.php and place in the scripts folder
yoursite.com/script/index.php like that

<?php
$pic = $_GET['stb'];
$water = "watermark.gif";
$pic = "secret/$pic.jpg";
 
      # include our watermerking class
      include 'water.php';
      $watermark              = new watermark();
 

   $main_img_obj                       = imagecreatefromjpeg("$pic");
      $watermark_img_obj      = imagecreatefromgif("$water");


// writing text

 $words = "Hello This is example text";

// true type font
$font = 'font.ttf';


// size duh

$fontsize=13;
// color

$color = ImageColorAllocate($main_img_obj, 100, 0, 100);

// Where to place the text
// from top
$ft = "22";
//from right
$fr = "22";
// angle
$angle = "0";

imagettftext($main_img_obj,  $fontsize, $angle, $fr, $ft, $color, $font, $words );



      # create our watermarked image - set 66% alpha transparency for our watermark
      $return_img_obj               = $watermark->create_watermark( $main_img_obj, $watermark_img_obj, 66 );
 
      # display our watermarked image - first telling the browser that it's a JPEG, 
      # and that it should be displayed inline
      header( 'Content-Type: image/jpeg' );
      header( 'Content-Disposition: inline; filename=' . $_GET['src'] );
      imagejpeg( $return_img_obj, '', 50 );
 
?>

Last but not least copy and save the following as ".htaccess" and upload to the script directory

RewriteEngine on
 RewriteRule ^(.*)\.jpeg http://www.yoursite.com/script/?stb=$1 [nc]

now you can try it out by pointing your browser to
yoursite.com/script/test.jpeg
or bypassing htacces if its giving you troubles by pointing to
yoursite.com/script/?stb=test

the picture is really inside the secret folder.

Now you should note that when you call the image you call it .jpeg not .jpg but the real images should be named .jpg

Nobody will know the secret directory but the server. if perhaps someone does , you can easily just rename the secret folder ( and change the index.php to reflect the new path ) and pictures wont work but your pictures will still work fine without having to change all your exisiting img tags

enjoy.. ill add a few tips in a moment.

any questions feels free to ask

[DomP_nl]

gonna check this one out fo sure :-)

[SmokeyTheBear]

p.s. this requires gd to be installed on your server ( most hosts have this on by default ) although many hosts dont have gd that supports true type fonts. if this is the case you can take out the test writing funstion by simply commenting out the line
imagettftext($main_img_obj, $fontsize, $angle, $fr, $ft, $color, $font, $words );


like this
// imagettftext($main_img_obj, $fontsize, $angle, $fr, $ft, $color, $font, $words );

[SmokeyTheBear]

in the example i didnt do anything tricky , just the same watermark for everyone. but its very easy to manipulate to check the referrer and do different things depepnding on if its hotlinked or not.

[SmokeyTheBear]

if you want to redirect all google images traffic you could do something like this ( add this to the first line of index.php )

$ref = $HTTP_REFERER ;
if (preg_match ("/google/", $ref)) {
echo "<script>top.location=\"http://redirect.com\";</script>";
}

[DarkJedi]

fuck that.

too complicated.

[SmokeyTheBear]

Originally Posted by DarkJedi

fuck that.

too complicated.

thanks for the bump though

Its much easier than doing it with a program and offers more than regular htaccess or any image editing program does

[DWB]

Smokey,
Is this just a layer over the image or does it stamp the pic so when someone saves it, it remains on there?

[DarkJedi]

Originally Posted by SmokeyTheBear

Its much easier than doing it with a program and offers more than regular htaccess or any image editing program does

No it's not.

I can watermark 1000's of photos with one click.

[sexykat]

Nice Script..bump for ya

[Mr.Right - Banned For Life]

I just use Arles, dead simple.

[baddog]

Originally Posted by DirtyWhiteBoy

Smokey,
Is this just a layer over the image or does it stamp the pic so when someone saves it, it remains on there?

That is what I was wondering. I get the feeling it doesn't actually save the image with the watermark.

[Sveindt Beindt]

Already got some thing like that very simple to use and if you download a pics my watermarks stay on pics

[spacedog]

I love smokey's threads. very informative & always learn new tricks of the trade. I appreciate threads like this.

[SmokeyTheBear]

Originally Posted by baddog

That is what I was wondering. I get the feeling it doesn't actually save the image with the watermark.

yup it actually creates the image with the watermark so if they saved it they get the watermark also

example http://gfy.webspacemania.com/mark/?main=test

[SmokeyTheBear]

Originally Posted by DarkJedi

No it's not.

I can watermark 1000's of photos with one click.

so does this.. i could do them much faster because i dont have to do them the script does.. its all done on the fly..

Sure you can do 1000 with one click ( well not really one , you have to open the program bring in the pics or folder thenset the watermark set the transparency etc etc .. )

Perhaps if you only ever watermarked a set of pics once it might work.. but if you do that every month or so my script beats it hands down and offers the ability to serve unwatermarked images to restricted areas like a members area without having to have sets of unwatermarked and watermakrked pics

Lets say for example you have a set of 1 million pics you want on your website and watermarked , you have to bring them into your program set the watermark do the process etc etc then upload them.. all i gotta do is upload them..

[SmokeyTheBear]

Originally Posted by Sveindt Beindt

Already got some thing like that very simple to use and if you download a pics my watermarks stay on pics

if you already have something simple why click a thread about something you already have

If you download pics with this script the watermark stays on , or it wouldnt be a watermark it would be an overlay.. this is a watermark

[EDepth]

nice little script would be better if it cache'd the image though... kind of wasteful to re-run per-image per surfer-load imo. Also u may want to add a imagedestroy call, but maybe that is not required.

[SmokeyTheBear]

To show you an example of how it can detect hotlink and only insert the watermark when hotlinked

http://gfy.webspacemania.com/mark/movie.html

thats what the example pic i used looks when used on my site but if you try to hotlink it you will get a watermarked version

[SmokeyTheBear]

Originally Posted by EDepth

nice little script would be better if it cache'd the image though... kind of wasteful to re-run per-image per surfer-load imo. Also u may want to add a imagedestroy call, but maybe that is not required.

the script is barebones so theres many things that could be added to it.. Yes it is a tad wastefull depending on what your using it for.. If its super high traffic loads you might be better off cacheing the marked images .

In what i was using it for space was a bit of a concern and i wanted to keep the ability to let my surfers see the pics without a watermark

[Spunky]

Great informative thread Smokey

[DWB]

Alrighty then, good stuff as always Smokey!!!

[StickyGreen]

props on the thread smokey...

[HomeFry]

Does this work with videos? lol

[SmokeyTheBear]

Originally Posted by HomeFry

Does this work with videos? lol

no but i had another thread about ways to do that..
http://www.gofuckyourself.com/showthread.php?t=677225

[RF_Erick]

Bookmarked!
thanks again Smokey.

[OzMan]

Thanks Smokey!