Hey there! Let's fix up your image composition code to properly use Facebook profile pictures and get the 76x76 final image you want. Here's what we need to address and how to do it:

Key Issues in Your Original Code #

• Remote Image Loading: Using imagecreatefrompng() directly on a Facebook URL might fail if your PHP config has allow_url_fopen disabled (a common security setting).
• Size Mismatch: You set $x = $y = 240 but want a 76x76 final image—this causes stretching and incorrect layering.
• No Scaling: Your source images (93x93 background, 720x720 Facebook avatar) aren't scaled to fit the 76x76 canvas, leading to distorted or cut-off results.

Step 1: Safely Fetch the Facebook Profile Picture #

First, let's download the Facebook avatar to a temporary file so we can load it reliably, even if allow_url_fopen is off. We'll use cURL for this:

// Facebook avatar URL
$fbAvatarUrl = 'https://graph.facebook.com/744595326681559/picture?width=720&height=720';

// Create a temporary file to store the avatar
$tempAvatar = tempnam(sys_get_temp_dir(), 'fb_avatar');

// Use cURL to download the image
$ch = curl_init($fbAvatarUrl);
$fp = fopen($tempAvatar, 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); // Follow redirects (Facebook might redirect the image)
curl_exec($ch);
curl_close($ch);
fclose($fp);

Step 2: Build the Composite Image Correctly #

Now let's create the 76x76 canvas, load all images, scale them appropriately, and layer them while preserving alpha transparency:

// Define final image dimensions (76x76 as requested)
$finalWidth = 76;
$finalHeight = 76;

// Load source images
$bgFile = __DIR__ . "/background-layer-1.png"; // 93x93
$iconFile = __DIR__ . "/icon-layer-2.png"; // 76x76

$bgImage = imagecreatefrompng($bgFile);
$iconImage = imagecreatefrompng($iconFile);
$avatarImage = imagecreatefrompng($tempAvatar);

// Create the final true-color canvas with alpha support
$finalImage = imagecreatetruecolor($finalWidth, $finalHeight);
imagealphablending($finalImage, false);
imagesavealpha($finalImage, true);

// Scale and copy the background (93x93 → 76x76)
imagecopyresampled(
    $finalImage, $bgImage,
    0, 0, // Destination x,y
    0, 0, // Source x,y
    $finalWidth, $finalHeight, // Destination size
    imagesx($bgImage), imagesy($bgImage) // Source size
);

// Copy the icon (already 76x76, so direct copy)
imagecopy($finalImage, $iconImage, 0, 0, 0, 0, $finalWidth, $finalHeight);

// Scale and copy the Facebook avatar (720x720 → 76x76, centered)
imagecopyresampled(
    $finalImage, $avatarImage,
    0, 0, // Destination x,y (adjust here if you want offset)
    0, 0, // Source x,y
    $finalWidth, $finalHeight, // Destination size
    imagesx($avatarImage), imagesy($avatarImage) // Source size
);

// Output the image to browser
header('Content-Type: image/png');
imagepng($finalImage);

// Save to file if needed
imagepng($finalImage, 'final_img1.png');

// Clean up resources
imagedestroy($bgImage);
imagedestroy($iconImage);
imagedestroy($avatarImage);
imagedestroy($finalImage);
unlink($tempAvatar); // Delete the temporary avatar file

Notes on Alpha Transparency #

• We set imagealphablending($finalImage, false) before saving alpha to ensure the canvas has a transparent background (if your source images have transparency).
• imagesavealpha($finalImage, true) preserves the alpha channel in the final output, so your layers won't lose their transparency.

Adjusting Layer Positions #

If you don't want the avatar to cover the entire canvas, adjust the destination x and y parameters in imagecopyresampled for the avatar. For example, to center a smaller avatar (say 60x60) on the 76x76 canvas:

$avatarSize = 60;
$offsetX = ($finalWidth - $avatarSize) / 2;
$offsetY = ($finalHeight - $avatarSize) / 2;

imagecopyresampled(
    $finalImage, $avatarImage,
    $offsetX, $offsetY,
    0, 0,
    $avatarSize, $avatarSize,
    imagesx($avatarImage), imagesy($avatarImage)
);

内容的提问来源于stack exchange，提问作者abdo kamel