Downloads All Images on Page

downloadImagesZIP.js

(async () => {
	const QUERY_SELECTOR = "img";

	// ! get image blobs
	let blobs = [...document.querySelectorAll(QUERY_SELECTOR)].map(
		async ({src}) => ({
			src,
			blob: await (await fetch(src, {mode: "no-cors"})).blob(),
		})
	);
	blobs = await Promise.all(blobs);

	// ! skip imports/zip if no images
	if (!blobs.length) return;
	
	// ! libraries: JSZip, FileSaver
	const cdns = [
		`https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js`,
		`https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js`,
	].map((cdn) => {
		const script = document.createElement("script");
		script.src = cdn;
		document.head.appendChild(script);
		return new Promise((res, rej) => {
			script.addEventListener("load", () => {
				res();
			});
		});
	});
	await Promise.all(cdns);
	
	// ! add files to zip
	const ext = {
		"image/jpeg": "jpg",
		"image/png": "png",
	};
	const zip = new JSZip();
	let i = 0;
	for (const {blob, src} of blobs) zip.file(`${i++}.${ext[blob.type]}`, blob);

	// ! download zip
	zip.generateAsync({type: "blob"}).then((content) => {
		saveAs(content, "images.zip");
	});
})();