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

alt text

Image Two

alt text

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

alt text

If watermark is working ,but not giving the result as you wanted , my crooked mind is thinking about combination of 3 images. first image is a blank white image, u merge first image onleft side and second image on right side. I know writing code will not be easy as posting comments. Just comment what cam ein my mind — zod, Oct 06 '10 at 20:16
I need PHP if I am allowing the users to download the image. — homework, Dec 13 '15 at 03:39
@Homework You got your answer below. But just for information: You can combine images (and do a lot other stuff too) through JavaScript and the ` — StanE, Dec 11 '16 at 15:28
@StanE, thank you for this information. I have learned a lot in the past few years. — homework, Aug 12 '17 at 03:03

homework · Accepted Answer · 2010-10-06T22:38:24.017

133

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

edited Oct 06 '10 at 22:38

answered Oct 06 '10 at 20:09

homework

4,987
11
40
50

5

Works on images with transparency. – homework Oct 06 '10 at 21:40

score 26 · Answer 2 · answered Oct 06 '10 at 23:29

26

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?

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.
Such separation is much more convenient to use. User can easily copy that image. It's easier to index by web-spiders.
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;
}

answered Oct 06 '10 at 23:29

Crozin

43,890
13
88
135

4

Thanks for this, but I asked for PHP. Still going to save this. – homework Oct 07 '10 at 00:57
1

True. Its easier for the server because it doesnt have to process all images. And its also faster for the user because it doesnt have the part of the image with the vinyl all the time. – Nicky Smits Mar 08 '14 at 17:45
2

The selected answer is interesting because we can mix two images and share on facebook. – Fabio Montefuscolo May 31 '16 at 01:49
4

CSS only works if the images are to be used on a website. Images to be shared on social media, downloaded by users, etc, cannot be created using CSS. – Sherwin Flight Nov 19 '16 at 02:17
Could some help me I need to save image after merge. Is this possible by writing html. – Rahul Vats Jul 26 '17 at 08:13
@Crozin how to download image with both background image added from css and the original image as one file. – NomanJaved May 02 '19 at 21:17

score 20 · Answer 3 · answered Sep 14 '17 at 19:05

20

ImageArtist is a pure gd wrapper authored by me, this enables you to do complex image manipulations insanely easy, for your question solution can be done using very few steps using this powerful library.

here is a sample code.

$img1 = new Image("./cover.jpg");
$img2 = new Image("./box.png");
$img2->merge($img1,9,9);
$img2->save("./merged.png",IMAGETYPE_PNG);

This is how my result looks like.

answered Sep 14 '17 at 19:05

Imal Hasaranga Perera

9,683
3
51
41

1

Awesome! Thank you. – homework Nov 13 '17 at 03:05
Fantastic! you save me hours! – Atomico Mar 10 '20 at 11:14
Perfect +10000 from me :D – Vipertecpro Aug 24 '21 at 04:00
Awesome, was going through the package and noticed the class CircularShape was wondering if i could add border to the circle shape, or any documentation i could look at? – youngdero Mar 13 '23 at 16:21

score 7 · Answer 4 · answered Mar 21 '18 at 13:46

You can try my function for merging images horizontally or vertically without changing image ratio. just copy paste will work.

function merge($filename_x, $filename_y, $filename_result, $mergeType = 0) {

    //$mergeType 0 for horizandal merge 1 for vertical merge

 // Get dimensions for specified images
 list($width_x, $height_x) = getimagesize($filename_x);
 list($width_y, $height_y) = getimagesize($filename_y);


$lowerFileName = strtolower($filename_x); 
if(substr_count($lowerFileName, '.jpg')>0 || substr_count($lowerFileName, '.jpeg')>0){
    $image_x = imagecreatefromjpeg($filename_x);    
}else if(substr_count($lowerFileName, '.png')>0){
    $image_x = imagecreatefrompng($filename_x); 
}else if(substr_count($lowerFileName, '.gif')>0){
    $image_x = imagecreatefromgif($filename_x); 
}


$lowerFileName = strtolower($filename_y); 
if(substr_count($lowerFileName, '.jpg')>0 || substr_count($lowerFileName, '.jpeg')>0){
    $image_y = imagecreatefromjpeg($filename_y);    
}else if(substr_count($lowerFileName, '.png')>0){
    $image_y = imagecreatefrompng($filename_y); 
}else if(substr_count($lowerFileName, '.gif')>0){
    $image_y = imagecreatefromgif($filename_y); 
}


if($mergeType==0){
    //for horizandal merge
     if($height_y<$height_x){
        $new_height = $height_y;

        $new_x_height = $new_height;
        $precentageReduced = ($height_x - $new_height)/($height_x/100);
        $new_x_width = ceil($width_x - (($width_x/100) * $precentageReduced));

         $tmp = imagecreatetruecolor($new_x_width, $new_x_height);
        imagecopyresampled($tmp, $image_x, 0, 0, 0, 0, $new_x_width, $new_x_height, $width_x, $height_x);
        $image_x = $tmp;

        $height_x = $new_x_height;
        $width_x = $new_x_width;

     }else{
        $new_height = $height_x;

        $new_y_height = $new_height;
        $precentageReduced = ($height_y - $new_height)/($height_y/100);
        $new_y_width = ceil($width_y - (($width_y/100) * $precentageReduced));

         $tmp = imagecreatetruecolor($new_y_width, $new_y_height);
        imagecopyresampled($tmp, $image_y, 0, 0, 0, 0, $new_y_width, $new_y_height, $width_y, $height_y);
        $image_y = $tmp;

        $height_y = $new_y_height;
        $width_y = $new_y_width;

     }

     $new_width = $width_x + $width_y;

     $image = imagecreatetruecolor($new_width, $new_height);

    imagecopy($image, $image_x, 0, 0, 0, 0, $width_x, $height_x);
    imagecopy($image, $image_y, $width_x, 0, 0, 0, $width_y, $height_y);

}else{


    //for verical merge
    if($width_y<$width_x){
        $new_width = $width_y;

        $new_x_width = $new_width;
        $precentageReduced = ($width_x - $new_width)/($width_x/100);
        $new_x_height = ceil($height_x - (($height_x/100) * $precentageReduced));

        $tmp = imagecreatetruecolor($new_x_width, $new_x_height);
        imagecopyresampled($tmp, $image_x, 0, 0, 0, 0, $new_x_width, $new_x_height, $width_x, $height_x);
        $image_x = $tmp;

        $width_x = $new_x_width;
        $height_x = $new_x_height;

     }else{
        $new_width = $width_x;

        $new_y_width = $new_width;
        $precentageReduced = ($width_y - $new_width)/($width_y/100);
        $new_y_height = ceil($height_y - (($height_y/100) * $precentageReduced));

         $tmp = imagecreatetruecolor($new_y_width, $new_y_height);
        imagecopyresampled($tmp, $image_y, 0, 0, 0, 0, $new_y_width, $new_y_height, $width_y, $height_y);
        $image_y = $tmp;

        $width_y = $new_y_width;
        $height_y = $new_y_height;

     }

     $new_height = $height_x + $height_y;

     $image = imagecreatetruecolor($new_width, $new_height);

    imagecopy($image, $image_x, 0, 0, 0, 0, $width_x, $height_x);
    imagecopy($image, $image_y, 0, $height_x, 0, 0, $width_y, $height_y);

}





$lowerFileName = strtolower($filename_result); 
if(substr_count($lowerFileName, '.jpg')>0 || substr_count($lowerFileName, '.jpeg')>0){
    imagejpeg($image, $filename_result);
}else if(substr_count($lowerFileName, '.png')>0){
    imagepng($image, $filename_result);
}else if(substr_count($lowerFileName, '.gif')>0){
    imagegif($image, $filename_result); 
}


 // Clean up
 imagedestroy($image);
 imagedestroy($image_x);
 imagedestroy($image_y);

}


merge('images/h_large.jpg', 'images/v_large.jpg', 'images/merged_har.jpg',0); //merge horizontally
merge('images/h_large.jpg', 'images/v_large.jpg', 'images/merged.jpg',1); //merge vertically

Appreciated, thanks for sharing. – Mustafa Erdogan Jan 31 '23 at 22:08 — Mustafa Erdogan, Jan 31 '23 at 22:08

score 2 · Answer 5 · answered Oct 06 '10 at 19:54

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.

score 2 · Answer 6 · answered Oct 06 '10 at 19:54

2

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

answered Oct 06 '10 at 19:54

Alex Howansky

50,515
8
78
98

score 2 · Answer 7 · answered May 05 '20 at 12:54

Merger two image png and jpg/png [Image Masking]

//URL or Local path
$src_url = '1.png';
$dest_url = '2.jpg';
$src = imagecreatefrompng($src_url);
$dest1 = imagecreatefromjpeg($dest_url);

//if you want to make same size
list($width, $height) = getimagesize($dest_url);
list($newWidth, $newHeight) = getimagesize($src_url);
$dest = imagecreatetruecolor($newWidth, $newHeight);

imagecopyresampled($dest, $dest1, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);

list($src_w, $src_h) = getimagesize($src_url);

//merger with same size
$this->imagecopymerge_alpha($dest, $src, 0, 0, 0, 0, $src_w, $src_h, 100);

//show output on browser
header('Content-Type: image/png');
imagejpeg($dest);

imagecopymerge_alpha

function imagecopymerge_alpha($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct)
    {
        $cut = imagecreatetruecolor($src_w, $src_h);
        imagecopy($cut, $dst_im, 0, 0, $dst_x, $dst_y, $src_w, $src_h);
        imagecopy($cut, $src_im, 0, 0, $src_x, $src_y, $src_w, $src_h);
        imagecopymerge($dst_im, $cut, $dst_x, $dst_y, 0, 0, $src_w, $src_h, $pct);
    }

score 1 · Answer 8 · answered Oct 06 '10 at 19:56

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.

Merging two images with PHP

8 Answers8

Linked