-
-
Save jonfk/5c408d628566510b345a070faf9604fe to your computer and use it in GitHub Desktop.
Bookmarklet to download some images on a page
This file contains hidden or 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
// as one-liner for bookmarklet | |
javascript:;(function(){var images=document.querySelector('#background.player').children;try{for (let img of images) {downloadResource(img.src)}}catch(e){alert("Download failed.");console.log('Download failed.',e)}function forceDownload(blob,filename){var a=document.createElement('a');a.download=filename;a.href=blob;a.click()}function downloadResource(url,filename){if(!filename)filename=url.split('\\').pop().split('/').pop();fetch(url,{headers:new Headers({'Origin':location.origin}),mode:'cors'}).then(response=>response.blob()).then(blob=>{let blobUrl=window.URL.createObjectURL(blob);forceDownload(blobUrl,filename)}).catch(e=>console.error(e))}}).call(window); |
This file contains hidden or 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
// From https://paul.kinlan.me/bookmarklet-to-download-all-images-on-a-page-with-the-file-system-api/ | |
// Doesn't work on firefox (2022-10-26) see: https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker#browser_compatibility | |
const run = async () => { | |
const dirHandle = await window.showDirectoryPicker(); | |
const imgs = [].slice.call(document.querySelector('#background.player').children); | |
imgs.forEach(async (img) => { | |
const url = img.src; | |
const name = url.split('\\').pop().split('/').pop(); | |
try { | |
console.log(`Fetching ${url}`); | |
const response = await fetch(url); | |
console.log(`Saving to ${name}`); | |
const file = await dirHandle.getFileHandle(name, { create: true }); | |
const writable = await file.createWritable(); | |
await response.body.pipeTo(writable); | |
} catch (err) { | |
console.log(err); | |
} | |
}); | |
}; | |
run(); |
This file contains hidden or 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
/* | |
Bookmarklet to download all images in the current page, including images from other origins. | |
Sources: | |
https://gist.github.com/sfrdmn/8834747 by sfrdmn, unlicenced but I hope you won't sue me :3 | |
https://stackoverflow.com/a/49500465/2550406 by Leeroy, CC-BY-SA | |
*/ | |
;(function() { | |
var images = document.querySelector('#background.player').children; | |
try { | |
for (let img of images) { | |
downloadResource(img.src); | |
} | |
} catch (e) { | |
alert("Download failed."); | |
console.log('Download failed.', e); | |
} | |
function forceDownload(blob, filename) { | |
var a = document.createElement('a'); | |
a.download = filename; | |
a.href = blob; | |
a.click(); | |
} | |
// Current blob size limit is around 500MB for browsers | |
function downloadResource( url, filename) { | |
if (!filename) filename = url.split('\\').pop().split('/').pop(); | |
fetch(url, { | |
headers: new Headers({ | |
'Origin': location.origin | |
}), | |
mode: 'cors' | |
}) | |
.then(response => response.blob()) | |
.then(blob => { | |
let blobUrl = window.URL.createObjectURL(blob); | |
forceDownload(blobUrl, filename); | |
}) | |
.catch(e => console.error(e)); | |
} | |
}).call(window); |
This file contains hidden or 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
// if the images are only thumbnails and contained directly within an <a/> element, run this first to replace the images with their quality versions... or edit the code above to call | |
//downloadResource(img.parentElement.href) | |
// instead of img.src | |
var images = [].slice.call(document.querySelectorAll('img')); | |
images.forEach(function(img){img.src = img.parentElement.href;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment