Created
September 27, 2024 10:59
-
-
Save batazo/2f018ac2f80b17537119a03d2c7347ce to your computer and use it in GitHub Desktop.
ZIP IMAGE WITH JS
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
| <!DOCTYPE html> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>IMAGE ZIP</title> | |
| </head> | |
| <body> | |
| <button class="download_button">LETÖLTÉS</button> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js'></script> | |
| <script id="rendered-js" > | |
| initZip({files: ['/image1.jpg','/image2.jpg', '/image3.jpg'], foldername: 'imgfolder', zipName: 'images' }) | |
| function initZip({ files, foldername, zipName }){ | |
| async function downloadImage(url) { | |
| const response = await fetch(url); | |
| if (!response.ok) { | |
| throw new Error(`Failed to fetch ${url}`); | |
| } | |
| return await response.blob(); | |
| } | |
| async function createZip() { | |
| const zip = new JSZip(); | |
| const folder = zip.folder(foldername); | |
| for (let i = 0; i < files.length; i++) { | |
| const file = files[i]; | |
| const blob = await downloadImage(file); | |
| folder.file(zipName +`${i + 1}.jpg`, blob); | |
| } | |
| const content = await zip.generateAsync({ type: 'blob' }); | |
| const link = document.createElement('a'); | |
| link.href = URL.createObjectURL(content); | |
| link.download = zipName + '.zip'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| function clickButton(){ | |
| createZip().catch(err => console.error(err)); | |
| } | |
| document.querySelector('.download_button').addEventListener('click', clickButton); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment