Image watermark with PHP

Submitted by n8coder on Wed, 05/20/2009 - 17:30

To prevent quality images being stolen, we can use PHP to watermark web-images in popular formats like GIF/PNG/JPEG. We print a transparent gif-image on a jpeg-photo in this tutorial. For best results I prefer gif than png, because some png formats require extra functions to print a transparent image. We can convert this script to a batch-watermarker easily to watermark photo albums/galleries with multiple pictures by putting code in a loop or create a function.

Steps:

  1. Load both images
  2. Get size of both images
  3. Copy watermark to main image
  4. Print image to screen



PHP functions:
imagecreatefromgif
imagecreatefromjpeg
getimagesize
imagecopymerge
header
imagejpeg
imagedestroy


Watermark image:




Main image:




PHP Code:

<?php 

$main_img = "Porsche_911_996_Carrera_4S.jpg"; // main big photo / picture
$watermark_img = "watermark.gif"; // use GIF or PNG, JPEG has no tranparency support
$padding = 3; // distance to border in pixels for watermark image
$opacity = 100; // image opacity for transparent watermark

$watermark = imagecreatefromgif($watermark_img); // create watermark
$image = imagecreatefromjpeg($main_img); // create main graphic

if(!$image || !$watermark) die("Error: main image or watermark could not be loaded!");

$watermark_size = getimagesize($watermark_img);
$watermark_width = $watermark_size[0]; 
$watermark_height = $watermark_size[1]; 

$image_size = getimagesize($main_img); 
$dest_x = $image_size[0] - $watermark_width - $padding; 
$dest_y = $image_size[1] - $watermark_height - $padding;

// copy watermark on main image
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $opacity);

// print image to screen
header("content-type: image/jpeg");  
imagejpeg($image); 
imagedestroy($image); 
imagedestroy($watermark); 



Example images:

Watermarked image with 10% opacity




Watermarked image with 50% opacity




Watermarked image with 100% opacity




Hello,
this is really great. However, I was wondering how to accomplish the following:
-Present the visitor with a field which he has to fill in (say with his name or a message) and an image,
-As he types, his text is displayed above the image and saved as such.
I've been searching throughout the web but can't find anything, could you help?

Tnx

Submitted by DeCook (not verified) on Sun, 10/04/2009 - 13:24

Permalink

Thanks for this striped down example, its great. First few examples I’d seen had loads to do with file writing as well, that just confused the matter. But this really shows just how simple it is.

Add new comment