快速下载数据的方法:图像来自chromes开发人员工具网络窗口?

时间:2017-07-16 22:34:26

标签: javascript image google-chrome developer-tools

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

有一种快速的方法来保存它们吗?因为手动执行此操作需要一生。

祝你好运, 马特

2 个答案:

答案 0 :(得分:0)

document加载图片后,您可以下载包含.har内容的DevTools文件,然后将JSON过滤为JavaScript对象,以创建data URL来自"mimeType" "encoding" "text"属性response.content数组中"entries" "log"属性的.har.har.length属性的let imgs = json.log.entries .map(({response:{content:{mimeType, encoding, text}}}) => /image/.test(mimeType) ? `data:${mimeType};${encoding};${text}` : null) .filter(Boolean); 属性1}}文件。

给定链接的this文件,结果将是axios()为17的数组

this

jsfiddle https://jsfiddle.net/j0grexnv/

答案 1 :(得分:0)

我发现实现我正在寻找的最简单的方法是:按图像过滤,在网络标签中选择一个结果,右键单击>复制 - >全部复制为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))