使用 javascript 从 PageSpeed Insights 获取屏幕截图
get screenshot from PageSpeed Insights, using javascript
我想获取 PageSpeed Insights 的屏幕截图。使用 API，我使用了我在此处创建的代码：https://embed.plnkr.co/plunk/c7fAFx，但不起作用。
请帮我！我正在学习编码。
为什么链接代码不起作用？
好吧，因为它很古老，并且试图使用版本 1 Page Speed Insights API。
它目前是版本 5，所以它不起作用，v1 不再作为 public API.
存在
如何重新创建此应用程序的功能？
在您学习编码时，我会为您列出步骤，然后您可以研究如何执行每个步骤并使用它来学习。
我会警告初学者，这里有很多东西要学。然而，另一方面，如果您设法弄清楚如何执行以下操作，您将拥有一个很好的第一个项目，该项目涵盖了 JS 开发的多个领域。
由于您已将此标记为“JavaScript”，因此我假设您想在浏览器中执行此操作。
在您想要保存图像之前都很好，因为您必须弄清楚如何压缩它们，这可能是最困难的部分。
我已经用粗体突出显示了您需要学习/实施的步骤
1。首先调用 API:
Page Speed Insights API 的当前 URL 是：
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://yoursite.com
只需将 url=https://yoursite.com 更改为您要从中收集图像的任何站点。
对于每天的少量请求，您无需担心 API 密钥。
然而，如果您已经有一个 API 键，只需将 &key=yourAPIKey 添加到 URL 的末尾（显然替换 yourAPIKey 部分 :-P）。
您想先对 API URL 进行 AJAX 调用。
2。解析响应
然后，当您收到回复时，您将收到大量 JSON 回复。
您需要解析 JSON 响应并将其转换为您可以使用的 JavaScript 对象或数组。
3。查找相关部分
所以一旦你有了一个 JavaScript 对象，你就可以使用你正在寻找的 "final-screenshot" 和 "screenshot-thumbnails".
这些位于“审核”下。
因此，例如，如果您解析为一个名为 lighthouseResults 的数组，您将寻找 lighthouseResults['audits']['final-screenshot'] 或 lighthouseResults['audits']['screenshot-thumbnails']
"final-screenshot" 包含网站在加载后的外观，因此如果您只是想要它，您就需要这个元素。
这包含一个 base64 编码的图像 (lighthouseResults['audits']['final-screenshot']['details']['data'])。
"screenshot-thumbnails" 是您想要的部分，如果您想要网站如何随时间加载的“幻灯片”。这包含 base64 编码的缩略图列表。
要访问其中的每一个，您需要遍历位于 lighthouseResults['audits']['screenshot-thumbnails']['details']['items'] 和 return 的每个项目，每个 ['item'][=29= 的 ['data'] 部分]
找到你想要的部分并将它们存储到一个变量
4a。解码图像
一旦您将图像保存在变量中，您就可以将它们作为 base64 编码的字符串。您需要将这些转换成可用的 jpg 图像。
为此，您需要 base64 解码 每张图片。
现在我只会在解码后在浏览器中显示它们。
了解如何解码 base64 编码图像
4b。解码图像的替代方案
由于图片是base64编码的，可以直接在浏览器中显示，无需先解码。
您可以只添加一个图像，其中 src 您在步骤 3 中收集的 base64 图像字符串。
如果您只想显示图像，这就容易多了。
将图像添加到屏幕并将 src 设置为步骤 3 中的 base64 图像字符串
保存图片
现在您在评论中说要保存图像。虽然这可以通过 JavaScript 完成，但对于开始来说可能有点高级。
如果你想保存你真正想要在服务器端做的图像。
但是，如果您确实想在浏览器中下载图像（胶片），那么您需要查看一个 zip 实用程序，例如 jszip.js。
这样做的好处是他们通常希望您先将图像转换为 base64，然后再压缩它们，因此实际上可能并不那么困难！
我想获取 PageSpeed Insights 的屏幕截图。使用 API，我使用了我在此处创建的代码：https://embed.plnkr.co/plunk/c7fAFx，但不起作用。 请帮我！我正在学习编码。
为什么链接代码不起作用？
好吧，因为它很古老，并且试图使用版本 1 Page Speed Insights API。
它目前是版本 5，所以它不起作用，v1 不再作为 public API.
存在如何重新创建此应用程序的功能？
在您学习编码时，我会为您列出步骤，然后您可以研究如何执行每个步骤并使用它来学习。
我会警告初学者，这里有很多东西要学。然而，另一方面，如果您设法弄清楚如何执行以下操作，您将拥有一个很好的第一个项目，该项目涵盖了 JS 开发的多个领域。
由于您已将此标记为“JavaScript”，因此我假设您想在浏览器中执行此操作。
在您想要保存图像之前都很好，因为您必须弄清楚如何压缩它们，这可能是最困难的部分。
我已经用粗体突出显示了您需要学习/实施的步骤
1。首先调用 API:
Page Speed Insights API 的当前 URL 是：
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://yoursite.com
只需将 url=https://yoursite.com 更改为您要从中收集图像的任何站点。
对于每天的少量请求，您无需担心 API 密钥。
然而，如果您已经有一个 API 键，只需将 &key=yourAPIKey 添加到 URL 的末尾（显然替换 yourAPIKey 部分 :-P）。
您想先对 API URL 进行 AJAX 调用。
2。解析响应
然后，当您收到回复时，您将收到大量 JSON 回复。
您需要解析 JSON 响应并将其转换为您可以使用的 JavaScript 对象或数组。
3。查找相关部分
所以一旦你有了一个 JavaScript 对象，你就可以使用你正在寻找的 "final-screenshot" 和 "screenshot-thumbnails".
这些位于“审核”下。
因此，例如，如果您解析为一个名为 lighthouseResults 的数组，您将寻找 lighthouseResults['audits']['final-screenshot'] 或 lighthouseResults['audits']['screenshot-thumbnails']
"final-screenshot" 包含网站在加载后的外观，因此如果您只是想要它，您就需要这个元素。
这包含一个 base64 编码的图像 (lighthouseResults['audits']['final-screenshot']['details']['data'])。
"screenshot-thumbnails" 是您想要的部分，如果您想要网站如何随时间加载的“幻灯片”。这包含 base64 编码的缩略图列表。
要访问其中的每一个，您需要遍历位于 lighthouseResults['audits']['screenshot-thumbnails']['details']['items'] 和 return 的每个项目，每个 ['item'][=29= 的 ['data'] 部分]
找到你想要的部分并将它们存储到一个变量
4a。解码图像
一旦您将图像保存在变量中，您就可以将它们作为 base64 编码的字符串。您需要将这些转换成可用的 jpg 图像。
为此，您需要 base64 解码 每张图片。
现在我只会在解码后在浏览器中显示它们。
了解如何解码 base64 编码图像
4b。解码图像的替代方案
由于图片是base64编码的，可以直接在浏览器中显示，无需先解码。
您可以只添加一个图像，其中 src 您在步骤 3 中收集的 base64 图像字符串。
如果您只想显示图像，这就容易多了。
将图像添加到屏幕并将 src 设置为步骤 3 中的 base64 图像字符串
保存图片
现在您在评论中说要保存图像。虽然这可以通过 JavaScript 完成，但对于开始来说可能有点高级。
如果你想保存你真正想要在服务器端做的图像。
但是，如果您确实想在浏览器中下载图像（胶片），那么您需要查看一个 zip 实用程序，例如 jszip.js。
这样做的好处是他们通常希望您先将图像转换为 base64，然后再压缩它们，因此实际上可能并不那么困难！