Show transparent png image over another one

Question

I'm trying to overlap a transparent png image over another png. I followed other answers but I didn't manage to solve my problem. Here it is what I've done so far:

header("Content-type: image/png");
$im = imagecreatefrompng("image/orange.png");
$trans_background = imagecolorallocate($im, 0, 0, 0, 127);
$logo = imagecreatefrompng($data["badgeUrls"]["medium"]);
imagesavealpha($logo, true);
imagefill($logo, 0, 0, $trans_background);  
imagecopy($im, $logo, 100, 100, 0, 0, 200, 200);
imagepng($im);
imagedestroy($logo);
imagedestroy($im);

and this is the result: result

EDIT: logo.png it's transparent. If I try this code on html using the same link, it works:

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<img src="https://api-assets.clashofclans.com/badges/200/lTvtX122PSoz5wXzrzp5mFlw0y-72zVviKvuy9cXOFs.png">
</body>
</html>

Result 2: pic

Check this: https://stackoverflow.com/questions/7985583/transparent-png-over-jpg-in-php — Salim Ibrohimi, Apr 26 '20 at 15:31
Could I understand that you don't want the black background behind the logo. i.e you want the logo to be directly over the orange background? — SaidbakR, Apr 26 '20 at 17:48
@SaidbakR I read that but I can't understand this: "Your $width and $height should be the dimensions of the watermark, not of the photo". My $logo is 200x200 — Erry215, Apr 26 '20 at 18:20

SaidbakR · Accepted Answer · 2020-04-26T21:27:31.353

I have modified your code by commenting some lines and adjusting the dimensions to prevent the black background:

<?php
header("Content-type: image/png");
$im = imagecreatefrompng("orange.png");
//$trans_background = imagecolorallocate($im, 0, 0, 0, 127);
$logo = imagecreatefrompng('logo.png'); //logo image dimensions = 64 x 64 px
//imagesavealpha($logo, true);
//imagefill($logo, 0, 0, $trans_background);  
imagecopy($im, $logo, 100, 100, 0, 0, 64, 64); // dimensions of the logo image 64 * 64 px
imagepng($im);
imagedestroy($logo);
imagedestroy($im);

The envelope image in the screen shot is transparent png image of dimensions 64 * 64 px.

Update:

If you want to add a custom background to the logo image and you want to determine its dimensions dynamically, you will have to use imagesx() for getting width and imagesy() for getting height. Also, you have to use imagecolorallocatealpha() in your code instead of imagecolorallocate()

<?php
header("Content-type: image/png");
$im = imagecreatefrompng("orange.png");
$trans_background = imagecolorallocatealpha($im, 0, 0, 100, 50); 
// Blue background // to be transparent imagecolorallocatealpha ($im, 0,0,0,127)
$logo = imagecreatefrompng('logo2.png');
imagesavealpha($logo, true);
imagefill($logo, 0, 0, $trans_background);  
imagecopy($im, $logo, 100, 100, 0, 0, imagesx($logo), imagesy($logo));
imagepng($im);
imagedestroy($logo);
imagedestroy($im);

Transparent Example:

In the `imagecopy()` you have to supply the dimensions of the water mark and the water mark image should be transparent. Just replace the images path in the code snippet and make sure the `logo.png` is transparent background image and finally supply the width and height of the logo.png in `imagecopy`. Otherwise, I don't understand the current issue of yours. — SaidbakR, Apr 26 '20 at 19:47
https://api-assets.clashofclans.com/badges/200/lTvtX122PSoz5wXzrzp5mFlw0y-72zVviKvuy9cXOFs.png this is logo.png — Erry215, Apr 26 '20 at 20:49
That image is not transparent! and your question is about placing transparent png image over another image as I have understood. — SaidbakR, Apr 26 '20 at 21:04

Show transparent png image over another one

1 Answers1

Update: