Merging two images with PHP

Question

I'm trying to merge two images together with PHP.

For example... how would I go about placing image one on top of image two or merge, with basic PHP? I have tried something such as watermarking, but it doesn't seem to be working.

Image One

Image Two

...and have it turn into this? FINAL RESULT:

Answer 1

Use the GD library or ImageMagick. I googled 'PHP GD merge images' and got several articles on doing this. In the past what I've done is create a large blank image, and then used imagecopymerge() to paste those images into my original blank one. Check out the articles on google you'll find some source code you can start using right away.

Answer 2

You can do this with the ImageMagick extension. I'm guessing that the combineImages() method will do what you want.

Answer 3

The GD Image Manipulation Library in PHP is probably the best for working with images in PHP. Try one of the imagecopy functions (imagecopy, imagecopymerge, ...). Each of them combine 2 images in different ways. See the php documentation on imagecopy for more information.

Answer 4

.divtopLayer {
background-color: #fff;
text-align:center; padding:4px; position:absolute; left:500px; width:180px; height:80px; z-index:5;
}

try to apply and modify this style to the image which yu want on top. this image will be in a div and apply style to that div'

Answer 5

I got it working from one I made.

<?php
$dest = imagecreatefrompng('vinyl.png');
$src = imagecreatefromjpeg('cover2.jpg');

imagealphablending($dest, false);
imagesavealpha($dest, true);

imagecopymerge($dest, $src, 10, 9, 0, 0, 181, 180, 100); //have to play with these numbers for it to work for you, etc.

header('Content-Type: image/png');
imagepng($dest);

imagedestroy($dest);
imagedestroy($src);
?>

Answer 6

Question is about merging two images, however in this specified case you shouldn't do that. You should put Content Image (ie. cover) into <img /> tag, and Style Image into CSS, why?

1. As I said the cover belongs to the content of the document, while that vinyl record and shadow are just a part of the page styles.
2. Such separation is much more convenient to use. User can easily copy that image. It's easier to index by web-spiders.
3. Finally, it's much easier to maintain.

So use a very simple code:

<div class="cover">
   <img src="/content/images/covers/movin-mountains.png" alt="Moving mountains by Pneuma" width="100" height="100" />
</div>

.cover {
    padding: 10px;
    padding-right: 100px;

    background: url(/style/images/cover-background.png) no-repeat;
}