Using PHP to overlay images

[Helminthophobe]

I've been searching online for tutorials, I've been looking through PHP.net and I've searched a little here, but I still can not figure out how to overlay images on top of other images using PHP. I know how to create images with a background. I also know how to add text. I'm hoping someone here can help me with the image problem.

 

This is an example image that I am using as a background.

background.png

 

This is an example image that I want to overlay or put in the foreground.

foreground.png

 

How would I combine the two so it looks like the following:

 

Also I would like to overlay the image with text. I don't know if this is possible but the text will not always be the same length and the image will need to move with the length of the text. Here are two example images to hopefully better illustrate the idea. Can I add the image somehow to the text string?

 

Thank you in advance for any help or tips!

[tippy_102]

This should get you started....

<?php  

header('content-type: image/jpeg');  

$original_image = "image.jpg";

$watermark = imagecreatefrompng('watermark.png');  
$watermark_width = imagesx($watermark);  
$watermark_height = imagesy($watermark);  
$image = imagecreatetruecolor($watermark_width, $watermark_height);  
$image = imagecreatefromjpeg($original_image);  
$size = getimagesize($original_image);  
$dest_x = $size[0] - $watermark_width - 5;  
$dest_y = $size[1] - $watermark_height - 5;  
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  
imagejpeg($image);  
imagedestroy($image);  
imagedestroy($watermark); 

?>

[Helminthophobe]

Awesome! Thanks for the help. I think I can use this to do most of what I've been trying to figure out. It's going to take me a little while to dissect your code but I think I can figure it out with PHP.net's help.

 

Thanks again!

[Helminthophobe]

In the code you provided, is there a way to shrink the watermark image? I'm getting the image I'm using for the watermark from another website and as such, I don't have control over the height and width. The image changes quite often too so I can't just upload a copy to my server. I tried to use the code for resizing from PHP.net but it won't work in combination with your code. This is what I tried while using a test logo image:

 

header('content-type: image/jpeg');  

$filename = "logo.jpg";
list($width, $height) = getimagesize($filename);
$newwidth = 25;
$newheight = 25;
$thumb = imagecreatetruecolor($newwidth, $newheight);
$source = imagecreatefromjpeg($filename);
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);

$watermark = imagecreatefromjpeg($thumb);  
$watermark_width = imagesx($watermark);  
$watermark_height = imagesy($watermark);  
$image = imagecreatetruecolor($watermark_width, $watermark_height);  
$image = imagecreatefromjpeg($original_image);  
$size = getimagesize($original_image);  
$dest_x = $size[0] - $watermark_width - 1;  
$dest_y = $size[1] - $watermark_height - ($size[1] - $watermark_height - 1);  
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  
imagejpeg($image);  
imagedestroy($image);  
imagedestroy($watermark); 

 

Also is it possible to add multiple watermarks to one image? For example, if I wanted to add my site's logo to an image along with a manufacturer's logo.

[Helminthophobe]

Anyone know of a good resource besides PHP.net or a set of tutorials that may help me with this issue that is stumping me?

[laffin]

yer looking at resizing or scaling an image down. found a tutorial for ya Image resizing

[Helminthophobe]

Thanks for the link but it showed the same basic code I used above, which doesn't seem to work the way I'm hoping. Resizing works by itself and adding the watermark works by itself, but I can't figure out how to combine the two. I'm still stuck.

[laffin]

U prolly looking at resizing the watermark as well as the image.

 

as the watermark is gonna be a percentage of the actual image.

 

Image -> Resize

Watermark -> Generate -> Resize

Overlay Images

 

[writer]

I'm getting the image I'm using for the watermark from another website and as such, I don't have control over the height and width. The image changes quite often too so I can't just upload a copy to my server.

 

You could probably write a separate script to scrape the image information off the remove server and copy it to yours.

[NikkiLoveGod]

Is it nessecery to make the image as one? This is just an idea, but you could just load the picture, resize it, then use CSS to move it on top of the image?

[writer]

Is it nessecery to make the image as one? This is just an idea, but you could just load the picture, resize it, then use CSS to move it on top of the image?

 

I think his idea is to scrape the image and re-brand it as his own.

 

But you're right, that would be much easier.

[Helminthophobe]

I'm trying to make a script that builds a signature image for a forum. I'm getting data about users and trying to display it on the signature image. Using css won't work for what I'm trying to build since css isn't allowed in a forum signature.

 

This is the product of the code I'm working with so far using a few different users:

 

 

 

That little icon is 32x32 right now (appears to be larger because I've draw some lines around it) and I'd like to shrink it down to 25x25. The icon comes from another site. It's different with every user and there are a ton of images so I can't host all the images on my site. When I try to shrink it using the code I've shown above and code found in the tutorial linked above, the background image shows up fine but the icon disappears.

 

I don't know if this makes any better sense. Hopefully it does.