PHP 從 CSS 檔案提取並下載圖片：自動化前端資源抓取實戰

前端開發常需從既有 CSS 提取背景圖、字體等資源。本文示範完整流程：解析 CSS、提取 url() 路徑、解析相對/絕對 URL、批量下載並重組本地路徑。

CSS URL 解析正則

<?php
function extractCssUrls(string $css): array {
    // 匹配 url("...") url('...') url(...) 格式
    // 排除 data: URI、空值
    $pattern = '/url\(\s*[\'"]?([^\'")\s]+)[\'"]?\s*\)/i';
    preg_match_all($pattern, $css, $matches);
    
    $urls = [];
    foreach ($matches[1] as $url) {
        // 過濾 data: URI、空值、非圖片/字體資源
        if (str_starts_with($url, 'data:')) continue;
        if (empty(trim($url))) continue;
        $urls[] = $url;
    }
    return array_unique($urls);
}
?>

相對路徑轉絕對 URL

<?php
function resolveCssUrl(string $cssUrl, string $baseUrl): string {
    $base = rtrim(dirname($baseUrl), '/') . '/';
    
    if (str_starts_with($cssUrl, 'https://') || str_starts_with($cssUrl, 'https://') || str_starts_with($cssUrl, '//')) {
        return str_starts_with($cssUrl, '//') ? 'https:' . $cssUrl : $cssUrl;
    }
    if (str_starts_with($cssUrl, '/')) {
        $parsed = parse_url($baseUrl);
        return $parsed['scheme'] . '://' . $parsed['host'] . $cssUrl;
    }
    return $base . ltrim($cssUrl, './');
}
?>

完整自動化腳本

<?php
set_time_limit(0);
ini_set('memory_limit', '256M');

$cssUrl = 'https://example.com/assets/style.css';
$saveDir = __DIR__ . '/downloaded_assets';
$cssContent = file_get_contents($cssUrl);

if ($cssContent === false) {
    die("無法取得 CSS: $cssUrl");
}

// 1. 提取 URL
$relativeUrls = extractCssUrls($cssContent);
echo "發現 " . count($relativeUrls) . " 個資源\n";

// 2. 解析絕對 URL 並下載
$urlMap = []; // 原始 URL => 本地相對路徑
$success = $failed = 0;

foreach ($relativeUrls as $relUrl) {
    $absUrl = resolveCssUrl($relUrl, $cssUrl);
    $filename = basename(parse_url($absUrl, PHP_URL_PATH));
    $localPath = "$saveDir/$filename";
    
    // 避免檔名衝突
    $counter = 1;
    $origName = $filename;
    while (file_exists($localPath)) {
        $info = pathinfo($origName);
        $filename = $info['filename'] . "_$counter." . ($info['extension'] ?? '');
        $localPath = "$saveDir/$filename";
        $counter++;
    }

    // 3. 下載（使用前文 cURL 版本）
    $result = downloadImage($absUrl, $saveDir);
    if ($result['success']) {
        $urlMap[$relUrl] = $filename;
        $urlMap[$absUrl] = $filename; // 兩種格式都對應
        $success++;
        echo "✓ $filename\n";
    } else {
        $failed++;
        echo "✗ $absUrl - {$result['error']}\n";
    }
    usleep(200000); // 0.2秒禮貌延遲
}

// 4. 重寫 CSS 使用本地路徑
$newCss = $cssContent;
foreach ($urlMap as $orig => $local) {
    $newCss = str_replace($orig, $local, $newCss);
}
file_put_contents("$saveDir/style.local.css", $newCss);

echo "\n完成: 成功 $success, 失敗 $failed\n";
echo "本地 CSS: $saveDir/style.local.css\n";

function downloadImage(string $url, string $dir): array { /* 前文 cURL 實作 */ }
function extractCssUrls(string $css): array { /* 上方實作 */ }
function resolveCssUrl(string $cssUrl, string $baseUrl): string { /* 上方實作 */ }
?>

進階處理：@import 與 Source Map

• @import：遞迴解析導入的 CSS 檔案
• Source Map：.map 檔案可還原原始 SCSS/LESS 路徑
• 字體檔案：woff2、woff、ttf 同樣適用

注意事項

1. CSS 中可能包含查詢字串 ?v=1.2，下載時保留但檔名需處理
2. 大型專案建議使用 Headless Chrome (Puppeteer) 渲染後提取 computed styles
3. 生產環境請加入資料庫記錄下載狀態，支援斷點續傳