Save all images on a website locally

download-website-images.js

async function selectDirectory() {
  try {
    const handle = await window.showDirectoryPicker();
    return handle;
  } catch (error) {
    console.error("Error:", error);
  }
}

function downloadImages(url, saveDirectoryHandle) {
  fetch(url)
    .then(response => response.text())
    .then(html => {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, "text/html");
      const imageTags = doc.querySelectorAll("img");
      
      imageTags.forEach(async (imageTag, index) => {
        const imageUrl = imageTag.src;
        const absoluteImageUrl = new URL(imageUrl, url).href;
        const imageFileName = `${index + 1}.jpg`;
        
        try {
          const fileHandle = await saveDirectoryHandle.getFileHandle(imageFileName, { create: true });
          const writable = await fileHandle.createWritable();
          const response = await fetch(absoluteImageUrl);
          const blob = await response.blob();
          await writable.write(blob);
          await writable.close();
          
          console.log(`Downloaded: ${fileHandle.name}`);
        } catch (error) {
          console.error(`Error downloading image ${index + 1}.jpg:`, error);
        }
      });
    })
    .catch(error => {
      console.error("Error:", error);
    });
}

async function startDownload() {
  const url = "https://example.com"; // URL of the web page containing the images
  
  const saveDirectoryHandle = await selectDirectory();
  if (saveDirectoryHandle) {
    downloadImages(url, saveDirectoryHandle);
  }
}

// Example usage:
startDownload();