Merging Images is surprisingly easier than I thought it would be when looking it up.
Instead of just outputting the image right away, we need to create an image PHP can use. Depending on the file type you can just change "imagecreatefrompng" to "imagecreatefromgif" if you want to use another filetype.
PHP Code:
<?php
// bring your two (or more) images you want to merge in
$img1 = imagecreatefrompng('image1/path.png');
$img2 = imagecreatefrompng('image2/path.png');
//Get the height and width of the first (base) image:
$width=imagesx($img1);
$height=imagesy($img2);
// Merge the two images into one!
//Note: the 2nd image appears on top of the first image!
imagecopymerge($img1, $img2, 0, 0, 0, 0, $width, $height, 100);
// Output image (not saved to server)
header('Content-Type: image/png');
imagepng($img1);
imagedestroy($img1);
imagedestroy($img2);
?>
What this does is take our images and simply merge them together. Simple as that! :D Now I'll explain the imagecopymerge function so you can do this too ;D
imagecopymerge(IMAGE1,IMAGE2,X1,Y1,X2,Y2,WIDTH,HEIGHT,TRANSPAREN CY)
IMAGE1 is your first image, this is the base image which all your other images will go on top of. The new image is set to this variable.
IMAGE2 is your second image, this is the image that is being placed on top of the base image.
X1 and
Y1 are the X and Y coordinates of the main image. Unless you're doing something special, it's best to leave this as 0,0. Note: 0,0 is the top-left of the image!
X2 and
Y2 are the X and Y coordinates of the second image. If you want to position it over a certain part of your previous image, change these. Though I prefer to make all the images the same size and just have the placement done through transparent edges o3o
WIDTH and
HEIGHT are the width and height of the main image. If you want this to be flexible you can use the functions
imagesx() and
imagesy() (as seen above) to get the width and the hieght of the image for you.
TRANSPARENCY is how translucent the image being placed is. The numbers range between 0-100, 100 being opaque and 0 is transparent.
But this fancy little code can not only merge two images, it can merge so many more images in one go! This is also rather easy in the grand scheme of things!
Simply duplicate the imagecopymerge, imagecreatefrompng, and imagedestroy lines and you're all set ;D
PHP Code:
<?php
// bring your two (or more) images you want to merge in
$img1 = imagecreatefrompng('image1/path.png');
$img2 = imagecreatefrompng('image2/path.png');
$img3 = imagecreatefrompng('image3/path.png');
//Get the height and width of the first (base) image:
$width=imagesx($img1);
$height=imagesy($img2);
// Merge the three images into one!
//Note: the 2nd image appears on top of the first image!
imagecopymerge($img1, $img2, 0, 0, 0, 0, $width, $height, 100);
imagecopymerge($img1, $img3, 0, 0, 0, 0, $width, $height, 100);
// Output image (not saved to server)
header('Content-Type: image/png');
imagepng($img1);
imagedestroy($img1);
imagedestroy($img2);
imagedestroy($img3);
?>
Now, this could get rather long and cumbersome. So if you do plan on merging lots of images I highly recommend making an array for this to loop your imagecreatefromTYPE, imagecopymerge, and imagedestroy lines. It works very well ;D
Aaaaaaand that's all for merging I suppose. If you have any questions feel free to ask! In the context of adoptables, you could use this to make items or accessories for adoptables or let users make their own custom avatars and the link. Fun no? :D