使用PHP從多維陣列中解碼Base64影像資料

概述：我正在將 Lighthouse Page Speed Insights API 集成到我正在使用的自定義專案中。目標是簡單地在內部提供頁面速度見解。我已經設定好一切并且作業正常，但我想顯示正在測驗的頁面的螢屏截圖。對 API 的初始請求以 JSON 形式回傳。這是我關注的回應部分的示例。

"screenshot-thumbnails": {
    "id": "screenshot-thumbnails",
    "title": "Screenshot Thumbnails",
    "description": "This is what the load of your site looked like.",
    "score": null,
    "scoreDisplayMode": "informative",
    "details": {
      "items": [
        {
          "data": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRQBAwQEBQQFCQUFCRQNCw0UFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFP/AABEIAFMAeAMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5 gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4 Tl5ufo6ery8/T19vf4 fr/2gAMAwEAAhEDEQA/AP1ToAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD//Z",
          "timing": 300,
          "timestamp": 2102707475296
        },

我將該 json 回應動態保存在我的 Web 服務器上的目錄中，然后使用 file_get_contents 將其解碼為 PHP 陣列。

$ret = file_get_contents("logs/pagespeed/$selected.json");
$result = json_decode($ret, true); 

接下來，我將一個變數分配給包含每個專案的陣列（或者在這種情況下 item = 螢屏截圖。這些陣列中的值是 base64 編碼的影像資料、時間戳和螢屏截圖的時間（以毫秒為單位））

// Screenshot Thumbnails
$ss_data = $result['lighthouseResult']['audits']['screenshot-thumbnails']['details']['items'];

最后，我使用兩個 foreach 回圈來回顯每個螢屏截圖的適當資料。

foreach($ss_data as $key => $value) {
    foreach ($value as $comp => $values) {
        echo "<b>".$comp."</b>" . ":" . $values . "<br>";
    }
}

輸出結果之一的示例如下：

timestamp:3218752607871
timing:300
data:data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRQBAwQEBQQFCQUFCRQNCw0UFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFP/AABEIAFMAeAMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5 gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4 Tl5ufo6ery8/T19vf4 fr/2gAMAwEAAhEDEQA/AP1ToAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD//Z

問題： 我如何將變數分配給 $key "$data" 的 $value 以便對其運行 base64 解碼，或者是否有一種簡單的方法可以在 foreach 中運行 base64 解碼？

我要做的事情的影像示例： 來自燈塔頁面速度洞察測驗的影像

-- 如果這里有什么不明白的地方，請告訴我，以便我澄清。感謝您抽時間閱讀。也許這可以在未來幫助某人。

uj5u.com熱心網友回復：

如果您的目標是將 顯示data為影像，請執行此操作。您可以使用資料 URL 作為src影像元素，因此...

foreach($ss_data as $key => $value) {
    foreach ($value as $comp => $values) {
        if ($key === "data") {
            echo "<img src='$value'><br>";
        } else {
            echo "<b>".$comp."</b>" . ":" . $values . "<br>";
        }
    }
}

標籤：php json 接口 foreach 灯塔

上一篇：無法從API獲取值

下一篇：從APIJavascript映射JSON