Question

I am testing a script where I watermark an image in my webpage.

The script works fine and the image is watermark but my problem is that only the image is displayed on the page.

As soon as I add the script to my page it’s like the web page is converted to the image that I’m watermarking.

I think it’s because of header(“content-type: image/jpeg”); from the code.

I need to watermark the image on my webpage but I also need the rest of my webpage to be displayed too.

How is this done? I’m quite confused on how this works.

The script I’m using is from here

Here’s the code I’m using:

<?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);  

?>

NOTE: I’m getting the image path from the database so I cannot hardcode the image filename as it’s dynamic.

Answer 1

This is a bit mind-boggling if you’re doing it for the first time, but once you see how it works it’s really simple. 😉

You need one script that generates the image (e.g. image.php) and then your main script references that image (e.g. <img src="image.php">). It’s not possible to have one request/script return both a document and an image simultaneously.

(PS. it’s actually possible but it involves encoding the image as a very weird kind of src attribute. You don’t want to do it, trust me.)