How can I merge 3 images into 1 image via PHP?

Question

I really cannot find a way to successfully do it.. I've searched google for this and it either has black shades around the images or all the images don't overlap. Could you please help?

I am alright at PHP; I'd give myself a 2/5.. I would really appreciate if someone would be willing to help me out.

I'm looking for a simple api that goes something like:

$color=$_GET['color'];
$face=$_GET['face'];
$hat=$_GET['hat'];

echo '<img src="avatar.php?color=$color&face=$face&hat=$hat">';

Thanks for any help in advance. I can understand php from my knowledge of other languages, too, so don't be afraid to talk technical with me; but not too technical.

Solution 1

there are so many comments on this answer so I'm posting this as an answer.

Got it working on my pc.

use svens code :

    $images = array( $_GET['color'], $_GET['face'], $_GET['hat'] );

    // Allocate new image
    $img = imagecreatetruecolor(58, 75);
    // Make alpha channels work
    imagealphablending($img, true);
    imagesavealpha($img, true);

    foreach($images as $fn) {
        // Load image
        $cur = imagecreatefrompng($fn);
        imagealphablending($cur, true);
        imagesavealpha($cur, true);

        // Copy over image
        imagecopy($img, $cur, 0, 0, 0, 0, 58, 75);

        // Free memory
        imagedestroy($cur);
    }   

    header('Content-Type: image/png');  // Comment out this line to see PHP errors
    imagepng($img);

?>

I renamed your images like this so its easier :

smile : a.png
headset : b.png
blue : c.png

Turns out the problem is with the layering it. Putting one behind the other

after you rename the images, use this url -- it will work(works on my pc).

YOUR_FILE.php?hat=b.png&color=c.png&face=a.png

This will still give you a black background. I am not sure if you have the exact same code as above in your file on the server - because I played around with the image order on your link and it does not help. Try copy-pasting this exact same code on a different file and then trying. Play around with the order and check the results.

Solution 2

Here's some code to get you started. However you should note that image processing with gd and alpha channels is voodoo.

<?php

    $images = array( $_GET['color'], $_GET['face'], $_GET['hat'] );

    // Allocate new image
    $img = imagecreatetruecolor(58, 75);
    // Make alpha channels work
    imagealphablending($img, true);
    imagesavealpha($img, true);

    foreach($images as $fn) {
        // Load image
        $cur = imagecreatefrompng($fn);
        imagealphablending($cur, true);
        imagesavealpha($cur, true);

        // Copy over image
        imagecopy($img, $cur, 0, 0, 0, 0, 58, 75);

        // Free memory
        imagedestroy($cur);
    }   

    header('Content-Type: image/png');  // Comment out this line to see PHP errors
    imagepng($img);

?>

What you still have to do now is checking the return values (look up the image* functions in the manual) to make sure it doesn't fail silently.

I can't really promise it's going to work with the alpha channels.. If not you'll probably have to go through the comments to the imagecopymerge() or imagecopy() on php.net and see if I missed something.

Comments

[Seth]

Yea, thanks, but it shows a corrupt image. :/ I'll go google some more.

[svens]

Comment out the header and you'll probably know more. Lol wait, there's an error I should've spotted. Fixed now.

[Seth]

Okay, I commented out that one line, got quite a few parse errors.. debugging time.

[Seth]

Warning: imagecopymerge(): supplied argument is not a valid Image resource in /home/vol7/xtreemhost.com/xth_6884492/htdocs/avatar.php on line 18 Warning: imagepng(): supplied argument is not a valid Image resource in /home/vol7/xtreemhost.com/xth_6884492/htdocs/avatar.php on line 25

[Seth]

Okay, now it works. However, it shows a black background, and I'm not sure that 'color' is displaying.

[Seth]

See it for yourself: gyropanda.co.cc/…

[svens]

Just try out some things.. Like setting alphablending to true and maybe add a white background to the image. Short googling says you could use imagecopy if you enable alphablending (just replace the call to copymerge and drop the latest parameter).

[DMin]

@Seth -- you should consider up-voting an answer (& possibly marking it as correct answer) from a person that has put in so much effort.

[Seth]

Thanks for the help, but the images appear corrupt.. do you think you know whats wrong?

[Seth]

Oh my god.. it just randomly started working.. well, it still has a black background. :/