获取页面上所有的img，并保存到本地
浏览器的 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);}}
})();
此脚本的工作方式如下：
- 获取当前页面的所有
img标签。 - 使用文件系统访问 API 请求用户选择下载文件夹（此操作需要用户确认）。
- 遍历每个图片 URL，使用
fetch函数获取图片数据。 - 在用户选择的文件夹中创建对应的文件，并将图片数据写入文件。
请注意，此方法仅在支持文件系统访问 API 的浏览器（如 Chrome）中可用，并且用户需要手动确认并选择下载文件夹。
要在浏览器控制台中执行此脚本，请按照以下步骤操作：
- 打开你要下载图片的网页。
- 按 F12 或 Ctrl + Shift + I （Windows）或 Cmd + Option + I （Mac）打开开发者工具。
- 选择“Console”标签页。
- 将上面的脚本代码粘贴到控制台中，然后按 Enter 键执行。
执行脚本时，浏览器会弹出文件夹选择对话框，用户选择文件夹后，脚本会自动将所有图片下载并保存到该文件夹中。