PHP 獲取圖片主色調/平均顏色值實作：基於 GD 庫像素採樣統計

獲取圖片主要顏色或平均 RGB 值，常用於生成配色方案、縮圖佔位色、動態背景適配。本文提供基於 GD 库 imagecreatefromjpeg 的完整實作，遍歷所有像素累加 RGB 分量並計算平均值，代碼簡潔高效。

核心實作代碼

> 16) & 0xFF;
        $g = ($rgb >> 8) & 0xFF;
        $b = $rgb & 0xFF;
        
        $rTotal += $r;
        $gTotal += $g;
        $bTotal += $b;
        $total++;
    }
}

// 4. 計算平均值並四捨五入
$rAverage = round($rTotal / $total);
$gAverage = round($gTotal / $total);
$bAverage = round($bTotal / $total);

// 5. 輸出結果
echo "平均 RGB: ({$rAverage}, {$gAverage}, {$bAverage})";
echo "HEX: #" . sprintf('%02X%02X%02X', $rAverage, $gAverage, $bAverage);

// 釋放資源
imagedestroy($image);
?>

關鍵技術點解析

1. imagecolorat() 回傳格式

GD 庫內部以 32 位整數儲存顏色：0x00RRGGBB (Alpha 通道在更高位，標準 JPEG 無 Alpha)。

• ($rgb >> 16) & 0xFF → 取高 8 位 = Red
• ($rgb >> 8) & 0xFF → 取中 8 位 = Green
• $rgb & 0xFF → 取低 8 位 = Blue

2. 效能優化建議

3. 擴展支援 PNG/GIF/WebP

function get_average_color($path) {
    $info = getimagesize($path);
    $mime = $info['mime'];
    
    switch ($mime) {
        case 'image/jpeg': $img = imagecreatefromjpeg($path); break;
        case 'image/png':  $img = imagecreatefrompng($path); break;
        case 'image/gif':  $img = imagecreatefromgif($path); break;
        case 'image/webp': $img = imagecreatefromwebp($path); break; // PHP 5.5+
        default: throw new Exception("不支援的格式: $mime");
    }
    // ... 後續統計邏輯相同
}

應用場景範例

1. 生成 CSS 變數供前端使用

// API 回傳 JSON
header('Content-Type: application/json');
echo json_encode([
    'rgb' => [$rAverage, $gAverage, $bAverage],
    'hex' => sprintf('#%02X%02X%02X', $rAverage, $gAverage, $bAverage),
]);

/* 前端動態套用 */
:root {
    --img-primary-rgb: 123, 45, 67;
    --img-primary-hex: #7B2D43;
}
.card { background: var(--img-primary-hex); }

2. 圖片佔位骨架屏 (Skeleton Screen)

頁面載入前先顯示平均色塊，圖片載入完成再無縫切換，提升感知速度。

進階：主色調而非平均色 (K-Means 聚類)

平均色在多色圖片中會偏向灰暗。主流方案是對像素進行 K-Means 聚類 (K=3~5)，取最大簇群中心色。PHP 純實現較慢，建議：

• 調用 Python/OpenCV 微服務
• 使用 ImageMagick convert image.jpg -colors 5 -format "%c" histogram:info:-
• 前端 Canvas getImageData + 簡易聚類 (離線計算)

總結

GD 庫像素遍歷計算平均 RGB 是零依賴、零配置、跨平台的通用方案。配合縮圖預處理，單張圖片處理可控制在 10-50ms 內，完全滿足 Web 即時場景需求。