使用 PHP 从多维数组中解码 Base64 图像数据

Question

概述：我正在将 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 = screenshot。这些数组中的值是 base64 编码的图像数据、时间戳和屏幕截图的时间（以 ms 为单位））

// 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 解码，或者是否有一种简单的方法来运行内部的 base64 解码foreach?

我想要做的事情的图片示例： image from lighthouse page speed insights tests

-- 如果这里有什么不明白的地方，请告诉我，以便我澄清。感谢您抽时间阅读。也许这对以后的人有帮助。

Answer 1

如果您的 objective 要将 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 从多维数组中解码 Base64 图像数据

Using PHP to Decode Base64 Image Data From Multidimensional Array

php

api

foreach

json

lighthouse