Satch3000
Satch3000

Reputation: 49384

PHP image watermark only displaying image on page

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.

Upvotes: 0

Views: 1531

Answers (3)

Litty
Litty

Reputation: 1876

Put this script entirely separated from your "main website" script. On your website, use an <img> tag, with that watermarking script as the source.

You can't combine two different content-types like you're appearing to do. If you want a "web page" to appear, the content-type needs to be text/html. If you want just an image to appear, the content-type needs to be image/*.

Upvotes: 0

mjhennig
mjhennig

Reputation: 681

I believe you got confused about how this works: The watermark generating code above is not meant to be included in the page generating scripts/logic. Instead, it needs to be accessible behind it's own URL and then linked via <img src="./path/to/script"/> into the site you want to contain that image.

Upvotes: 2

Jan Kr&#252;ger
Jan Kr&#252;ger

Reputation: 18530

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.)

Upvotes: 5

Related Questions