Last active
July 7, 2024 19:57
-
-
Save jchiatt/a0e12268073522be8d09f0546e450307 to your computer and use it in GitHub Desktop.
Download all images from a webpage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const IMAGE_EXTENSIONS = [".jpg", ".png", ".svg", ".webp", ".gif"] | |
const getFileExtension = url => `.${url.split('?')[0].split('.').pop()}` | |
const imageUrls = | |
Array.from( | |
document.querySelectorAll('img') | |
).map(({ src }) => ({src})) | |
.filter(({ src }) => { | |
return src && IMAGE_EXTENSIONS.includes(getFileExtension(src)) | |
}) | |
.map(({src}, idx) => ({ src, filename: `Image-${idx}${getFileExtension(src)}`})) | |
function downloadFile(url, name) { | |
fetch(url).then(res => res.blob()).then(res => { | |
const link = document.createElement('a'); | |
link.setAttribute('download', name); | |
const href = URL.createObjectURL(res); | |
console.log(href) | |
link.href = href; | |
link.setAttribute('target', '_blank') | |
link.click(); | |
setTimeout(() => { | |
URL.revokeObjectURL(href) | |
}, 0) | |
}) | |
} | |
imageUrls.forEach((img) => { | |
downloadFile(img.src, filename) | |
}) |
I forgot to mention the first time its run on the site, I do get a message saying do you want to download, but it doesnt appear a second or more times on the same page.
it giving me an error "filename is not defined" i copied the all of the code without affecting it , why it giving me like this ?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, I was trying to use this function to download some images for a page first it didnt work but after reviewing the video I saw the last few lines in youtube look like this and it worked
imageUrls.forEach(({ src, filename}) => {
downloadFile(src, filename)
})
Now I was testing it on a page and there were 60 images. The first time I ran it it grabbed the first 18 and then stoped no error. I tried again and now it tries the first 10 and each images shows network error
I assume the site may think its getting a DDOS attack so I added some delays to the function but still not working
function downloadFile(url, name) {
fetch(url).then(res => res.blob()).then(res => {
const link = document.createElement('a');
link.setAttribute('download', name);
const href = URL.createObjectURL(res);
console.log(href)
link.href = href;
link.setAttribute('target', '_blank')
setTimeout(() => { link.click(); }, 1000);
setTimeout(() => {
URL.revokeObjectURL(href)
}, 500)
})
}
Not sure what to do Im still learinging javascript