获取页面上所有的img,并保存到本地

300 阅读2分钟

浏览器的 JavaScript 环境中受限于安全和隐私原因,不允许直接指定下载文件夹或访问本地文件系统。因此,无法通过纯 JavaScript 在浏览器控制台中实现下载图片到指定文件夹的功能。

然而,您可以使用 Web API 提供的文件系统访问 API 进行一定程度的操作,但需要用户手动确认和操作。以下是一个在支持文件系统访问 API 的浏览器(如 Chrome)中使用的示例脚本:

(async () => {
  // 获取所有图像元素
  const images = document.querySelectorAll("img");

  // 文件系统访问 API:请求用户选择下载文件夹
  const dirHandle = await window.showDirectoryPicker();

  for (let [index, img] of images.entries()) {
    try {
      const url = img.src;
      const response = await fetch(url);
      const blob = await response.blob();

      // 获取图片的 MIME 类型并确定文件扩展名
      const contentType = blob.type;
      let extension = contentType.split("/")[1]; // 从 MIME 类型中提取文件扩展名

      // 特别处理 SVG 图片格式
      if (contentType === "image/svg+xml") {
        extension = "svg";
      }

      const fileName = `${index + 1}.${extension}`;

      // 创建并写入文件
      const fileHandle = await dirHandle.getFileHandle(fileName, {
        create: true,
      });
      const writable = await fileHandle.createWritable();
      await writable.write(blob);
      await writable.close();

      console.log(`Downloaded: ${fileName}`);
    } catch (error) {
      console.error(`Failed to download image ${index + 1}:`, error);
    }
  }
})();

此脚本的工作方式如下:

  1. 获取当前页面的所有 img 标签。
  2. 使用文件系统访问 API 请求用户选择下载文件夹(此操作需要用户确认)。
  3. 遍历每个图片 URL,使用 fetch 函数获取图片数据。
  4. 在用户选择的文件夹中创建对应的文件,并将图片数据写入文件。

请注意,此方法仅在支持文件系统访问 API 的浏览器(如 Chrome)中可用,并且用户需要手动确认并选择下载文件夹。

要在浏览器控制台中执行此脚本,请按照以下步骤操作:

  1. 打开你要下载图片的网页。
  2. 按 F12 或 Ctrl + Shift + I(Windows)或 Cmd + Option + I(Mac)打开开发者工具。
  3. 选择“Console”标签页。
  4. 将上面的脚本代码粘贴到控制台中,然后按 Enter 键执行。

执行脚本时,浏览器会弹出文件夹选择对话框,用户选择文件夹后,脚本会自动将所有图片下载并保存到该文件夹中。