从 chrome 开发者工具网络 window 下载 data:image 的快速方法？

Question

我正在寻找一种快速下载开发人员工具“网络”选项卡中可以看到的所有图像的方法？它们以数据形式出现：image/png;base64 链接。您可以将它们单独打开到新选项卡中，然后从那里手动保存它们，但这似乎是唯一的方法。保存整个网页或 .har 文件似乎可以捕获它们。我尝试过的任何插件都没有剂量。：/

有没有快速保存的方法？因为手动执行此操作将花费一生。

此致，马特

Answer 1

在 document 加载图像后，您可以下载包含 DevTools 内容的 .har 文件，然后将 JSON 过滤为 JavaScript 对象从 "mimeType"、"encoding" 和 "text" 对象的 response.content 属性创建 data URL "log" "entries" 数组中的对象的属性属性共 .har 个文件。

给定链接的 .har 文件，结果将是一个 .length 为 17

的数组

let imgs = json.log.entries
           .map(({response:{content:{mimeType, encoding, text}}}) => 
             /image/.test(mimeType) 
             ? `data:${mimeType};${encoding};${text}` 
             : null)
           .filter(Boolean);

jsfiddle https://jsfiddle.net/j0grexnv/

Answer 2

我发现实现我正在寻找的最简单方法是：按图像过滤，select 网络选项卡中的结果之一，右键单击->复制->全部复制为 CURL(cmd ).这将为您提供所有资源的完整列表，然后您可以抓取每个图像的数据并将其转换为带有脚本的文件，这是我为此编写的脚本：

每个资源都另存为一行如下：

curl "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAbklEQVQoU42PsQ3CQAADzxPAKGECRJmO9qeAEWAbOkpC9ywQVoEFOPRCNCgCXNon2Q5AOV/X6ibQAXOhYvaHflHTQvTYwE9pVimnsRKWUwBySRlGJ8OXefsKiPc/Kn6NfN/k4dbYhczaOMmu3XwCriA4HJ2kao8AAAAASUVORK5CYII=" --compressed &

脚本：

import base64

fname = "starvedump.txt"
dataToBeFound = "data:image/png;base64,"
imgext = ".png"
imgpfx = "img/img_"

with open(fname) as f:
    d = f.readlines()

d[:] = [x for x in d if dataToBeFound in x]     
d = [x.replace('curl "' + dataToBeFound, '') for x in d]
d = [x.replace("\" --compressed &\n", "") for x in d]

for i, x in enumerate(d) :
    with open(imgpfx + str(i) + imgext, "wb") as fh:
        fh.write(base64.b64decode(x))

从 chrome 开发者工具网络 window 下载 data:image 的快速方法？

Fast way to download data:image from chromes developer tools network window?

javascript

google-chrome

image

developer-tools