如何提取网页中的所有图片素材？

想将网页里的图片素材一网打尽？其实并不复杂。基于Chromium内核的宙斯浏览器，提供了多种灵活的工具和路径，让你能根据不同需求，将网页图片资源保存到本地。

无论是精挑细选，还是批量打包，总有一款方法适合你。

一、使用内置“资源面板”查看并手动保存

对于需要筛选特定格式或尺寸图片的场景，最直接的方法是使用开发者工具。

宙斯浏览器基于Chromium内核，其Network面板是一个资源监控中心，网页加载的所有图片都会在此显示。

操作步骤如下：

• 打开目标网页，按下F12或右键选择“检查”，调出开发者工具。
• 切换到Network面板，点击顶部过滤器，只勾选Img类型。
• 刷新页面，所有图片的请求记录会整齐罗列。
• 点击任意记录，可在右侧Preview标签预览图片，或在Response标签确认原始数据。
• 找到图片后，右键该条目，选择Open in new tab在新标签页打开。
• 最后右键图片，选择“另存为”即可。

这个方法步骤稍多，但胜在精准可控。

二、安装“Image Downloader”扩展实现批量导出

如果想一次性打包页面里的图片，借助扩展程序会更高效。

宙斯浏览器兼容Chrome扩展生态，这为我们提供了便利。

具体操作：

• 访问浏览器扩展中心或Chrome网上应用店。
• 搜索并安装名为Image Downloader的扩展（作者通常是Nikolay S.）。
• 安装后，刷新目标网页，点击地址栏右侧的扩展图标。
• 扩展面板会智能识别页面内所有图片，包括：
  • img标签图片
  • background-image背景图
  • picture/source元素中的响应式图片
• 你可以全选，或根据格式、尺寸、URL规则筛选。
• 最后点击Download selected，选择保存路径和ZIP压缩包格式，即可一键批量下载。

三、启用“网页快照+本地解析”模式提取嵌入式图片

有些网页为了性能或设计，会采用Base64编码将图片内嵌在HTML或CSS里，或使用SVG数据URI。

这些“隐形”图片在Network面板可能没有独立请求记录。对付它们，需要换个思路——保存整个网页到本地再解析。

操作步骤：

• 在宙斯浏览器中打开目标页面。
• 按下Ctrl+S（Windows）或Cmd+S（macOS）。
• 关键一步：保存类型务必选择“网页，完整”。
• 浏览器会生成一个.html文件和一个同名的资源文件夹。
• 打开资源文件夹（通常叫_files），里面按扩展名排列的.png、.jpg、.gif、.svg等文件，就是你要的素材。

如果发现大量Base64编码的图片，可以用文本编辑器打开主HTML文件，搜索data:image/字符串，将后面的数据段复制出来，用在线Base64解码工具即可还原成图片文件。

四、运行自定义JavaScript脚本批量收集图片URL

对于开发者或高级用户，最灵活彻底的方法是直接运行脚本。

通过控制台执行一段JavaScript，可以遍历页面DOM中所有图片节点、CSS背景声明，甚至伪元素里的内容，收集所有图片地址。

具体操作：

• 打开目标网页，按F12进入开发者工具，切换到Console面板。
• 粘贴以下脚本并回车：

const imgs = [...document.querySelectorAll('img')].map(i => i.src).filter(u => u); const bg = [...document.querySelectorAll('*')].map(el => getComputedStyle(el).backgroundImage).filter(bg => bg !== 'none').map(bg => bg.match(/url(["']?(.*?)["']?)/)?.[1] || null).filter(u => u); [...new Set([...imgs, ...bg])].forEach(u => console.log(u));

• 执行后，控制台会逐行输出所有唯一的图片URL。
• 用鼠标拖选全部链接，复制并保存到一个urls.txt文本文件中。
• 最后，配合wget或aria2等命令行下载工具，执行批量下载指令（例如：aria2c -i urls.txt -d ./downloaded_images/），即可自动将列表中的所有图片下载到指定文件夹。

这个方法需要一点技术门槛，但绝对是批量处理和大规模采集的利器。

《夸克》非常好用的免费AI浏览器

下载APP查看