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
Share Improve this question asked Jul 16, 2017 at 22:34 MakkaMakka 2641 gold badge4 silver badges15 bronze badges 24-
What is the definition of "fast" at Question? Can you include result of
.har
file as text at Question? Are the images loaded within thedocument
? Have you tried creating a.zip
folder containing the images? Or usingCtrl+s
and selectingWebpage, 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 lines1230
through1233
:"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
Reset to default 3The 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/