Skip to content

Instantly share code, notes, and snippets.

@mxjxn

mxjxn/zip-them-images

Created December 28, 2023 04:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mxjxn/f0e755f14ccb77d376b36549a171fedf to your computer and use it in GitHub Desktop.
Save mxjxn/f0e755f14ccb77d376b36549a171fedf to your computer and use it in GitHub Desktop.
Download ZIP
chatGPT told me how to zip files in the browser.
Raw
zip-them-images
<!DOCTYPE html>
<html>
<head>
<title>Image Zipper</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
</head>
<body>
<button id="downloadBtn">Download Images as ZIP</button>
<script>
document.getElementById('downloadBtn').addEventListener('click', function() {
const images = [
'https://example.com/image1.png',
'https://example.com/image2.jpg',
// Add more image URLs here
];
const zip = new JSZip();
Promise.all(images.map(url =>
fetch(url)
.then(response => response.blob())
.then(blob => {
const filename = url.split('/').pop();
zip.file(filename, blob);
})
))
.then(() => {
return zip.generateAsync({ type: "blob" });
})
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'images.zip';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
})
.catch(e => console.error('Something went wrong:', e));
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment