I'm looking for a fast way to download all of the images that i can see in the network tab on developer tools? they e through as data:image/png;base64 links. You can open them into a new tab individually and save them manually from there but that seems to be the only way. Saving the whole webpage or a .har file dosent seem to capture them. Neither dose any addon i have tried. :/

is there a fast way to save them all? since manually doing this would take a lifetime.

Best regards, Matt

I'm looking for a fast way to download all of the images that i can see in the network tab on developer tools? they e through as data:image/png;base64 links. You can open them into a new tab individually and save them manually from there but that seems to be the only way. Saving the whole webpage or a .har file dosent seem to capture them. Neither dose any addon i have tried. :/

is there a fast way to save them all? since manually doing this would take a lifetime.

Best regards, Matt

• javascript
• image
• google-chrome
• developer-tools

• What is the definition of "fast" at Question? Can you include result of .har file as text at Question? Are the images loaded within the document? Have you tried creating a .zip folder containing the images? Or using Ctrl+s and selecting Webpage, Complete? – guest271314 Commented Jul 16, 2017 at 22:36
• Faster than doing it manually? i guess automated would have been a better word. the .har file is 76k lines long, ive been through the whole thing and i cannot find them link. yup, tried that. img ss of files – Makka Commented Jul 16, 2017 at 22:50
• "the .har file is 76k lines long, ive been through the whole thing and i cannot find them" The data URL's of the image files are in .har file, for example at lines 1230 through 1233: "size": 22221, "mimeType": "image/png", "text": "iV...", "encoding": "base64" – guest271314 Commented Jul 16, 2017 at 22:55
• Just to be clear, those are all images that are sent prior i guess, they are all saved if you use the save all method and yes, they are in the .har file. however the other 1400+ that are in the above format are not. Go to starve.io and try it for your self if you like. – Makka Commented Jul 16, 2017 at 23:13
• What is supposed to occur at the link? – guest271314 Commented Jul 16, 2017 at 23:16

2 Answers 2

The easiest way i have found to achieve what im looking for is to: filter by images, select one of the results in the network tab, rightclick->copy->copy all as CURL(cmd). this will give you a full list of all resources you can then scrape out the data for each image and convert it to a file with a script, here is the script i made to do this:

each resource is saves as a new line as follows:

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

Script:

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("\" --pressed &\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))

Once the images are loaded at document you can download the .har file with content at DevTools then filter the JSON as JavaScript object to create data URL's from "mimeType", "encoding" and "text" properties of response.content properties of objects within "entries" array of "log" property of .har file.

Given linked .har file, the result would be an array having .length of 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/j0grexnv/