使用 Promise.all等待所有图片加载完成，然后保存到zip下载

当你需要同时下载多个图片，并希望在一个操作完成后再继续下一步，可以使用JavaScript的Promise.all方法。首先，你需要为每个图片创建一个Promise，这个Promise会在图片加载完成时解析。以下是一个简单的示例：

function downloadImage(imgURL, filename) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve();
    img.onerror = reject;
    img.src = imageURL;
  });
}

const imagePromises = images.map((url, index) => {
  return downloadImage(url, `image_${index + 1}.jpg`).then(() => {
    // 在这里处理图片已下载的情况
    console.log(`Image ${index + 1} downloaded.`);
  });
});

// 使用Promise.all等待所有图片下载完成
Promise.all(imagePromises)
  .then(() => {
    // 所有图片都加载完毕，开始创建ZIP文件并下载
    createZip(images, 'downloaded_images.zip').then(() => {
      console.log('All images have been downloaded and zipped.');
    })
    .catch(err => console.error('Error creating zip:', err));
  })
  .catch(err => console.error('Error downloading images:', err));

function createZip(urls, fileName) {
  // 使用第三方库如axios的responseType属性获取data URL，然后转换成Blob对象
  // 这里假设有一个函数fetchDataUrls返回所有图片的DataURL
  const dataUrls = fetchDataUrls(images);
  return new Promise((resolve, reject) => {
    const zip = new JSZip();
    dataUrls.forEach((dataUrl, index) => {
      zip.file(`image_${index + 1}.jpg`, atob(dataUrl.split(',')[1]));
    });
    zip.generateAsync({ type: 'blob' }).then(blob => {
      saveAs(blob, fileName); // 使用saveAs库将Blob转为下载
      resolve();
    }).catch(reject);
  });
}

在这个例子中，`images`数组包含待下载的图片URL。`createZip`函数会创建一个新的JSZip实例，添加每个图片的数据URL，然后生成zip文件。`saveAs`库用于实际的下载操作。