PHP 動態為圖片添加透明度漸變效果實作

PHP GD 庫實作圖片透明度漸變

在 Web 開發中，動態為圖片添加漸變透明度是常見需求（如圖片水印、疊加層、視覺特效）。本文提供一個使用 PHP GD 庫實作「從左到右透明度漸變」的完整範例。

核心程式碼

<?php
// 1. 載入 JPEG 圖片
$imgSrc = imagecreatefromjpeg("5307754.jpg");
$imgW   = imagesx($imgSrc);
$imgH   = imagesy($imgSrc);

// 2. 設定漸變區域參數
$width  = 30;          // 漸變區域高度
$x1     = 2;           // 起始 X
$x2     = $imgW - $x1 - 20; // 結束 X
$y1     = ($imgH - $width) - 2; // 起始 Y（底部上方）
$y2     = $y1 + $width;        // 結束 Y
$steps  = $x2 - $x1;           // 總步數 = 寬度

// 3. 逐像素繪製漸變矩形
for ($i = 0; $i < $steps; $i++) {
    // 計算 Alpha 值：0(不透明) ~ 127(完全透明)
    $alphaX = round($i / ($steps / 127)) + 60;
    if ($alphaX >= 128) $alphaX = 127; // 限制上限

    // 建立白色+透明度顏色
    $alphaColor = imagecolorallocatealpha($imgSrc, 255, 255, 255, $alphaX);

    // 畫 1px 寬的垂直矩形
    imagefilledrectangle(
        $imgSrc,
        $i + $x1, $y1,
        $i + $x1 + 1, $y2,
        $alphaColor
    );
}

// 4. 輸出圖片
header('Content-Type: image/jpeg');
imagejpeg($imgSrc);
imagedestroy($imgSrc);
?>

關鍵技術點解析

進階應用建議

• 方向擴展：修改座標計算可實作垂直、對角、徑向漸變
• 顏色漸變：將固定白色改為 RGB 也隨步數變化
• 效能優化：大圖處理可考慮分塊或使用 imagefilter() 內建濾鏡
• 支援 PNG：改用 imagecreatefrompng() + imagepng() 保留原有透明通道

實際應用場景

1. 圖片底部淡出效果（文字疊加區）
2. 輪播圖切換時的疊加過渡
3. 動態產生帶漸變遮罩的縮圖
4. 水印透明度漸變（由淺入深）