图片下载
FlowPick 图片检测与批量下载指南，介绍如何从网页图库识别 JPG、PNG、GIF、WebP、SVG 等格式，并按文件类型、大小和资源地址进行筛选。
FlowPick 自动检测网页中的图片资源，支持按尺寸、格式和文件大小智能过滤，适合保存图库、设计素材、摄影作品等场景。
检测原理
图片检测基于 Chrome 扩展的 webRequest API，与视频/音频检测共用同一套监听机制：
- 网络拦截：扩展监听所有网络请求，匹配图片 MIME 类型（
image/*） - DOM 扫描：遍历页面中的
<img>标签和 CSS 背景图片，补充网络层可能遗漏的资源 - 懒加载感知：监听页面滚动事件，捕获延迟加载的图片
- 尺寸获取：从响应头或图片元数据中提取宽度、高度和文件大小
- 过滤展示：根据用户设置的过滤条件筛选后，在"图片"标签页中展示
检测时机：
- 页面加载时自动扫描已存在的图片
- 滚动页面时捕获懒加载图片
- 动态插入的图片（如 AJAX 加载的图库）在请求发生时被检测
支持的图片格式
位图格式
适合照片和复杂图像，像素级存储：
| 格式 | Content-Type | 扩展名 | 压缩方式 | 适用场景 | 兼容性 |
|---|---|---|---|---|---|
| JPEG | image/jpeg | .jpg / .jpeg | 有损 | 照片、截图 | 所有设备 |
| PNG | image/png | .png | 无损 | 图标、透明图、截图 | 所有设备 |
| WebP | image/webp | .webp | 有损/无损 | 现代网页图片 | Chrome/Edge/Firefox |
| GIF | image/gif | .gif | 无损（256 色） | 动图、简单动画 | 所有设备 |
矢量格式
适合图标和图形，无限缩放不失真：
| 格式 | Content-Type | 扩展名 | 特点 | 适用场景 | 兼容性 |
|---|---|---|---|---|---|
| SVG | image/svg+xml | .svg | XML 文本，可编辑 | 图标、Logo、插画 | 所有现代浏览器 |
格式选择建议
| 场景 | 推荐格式 | 原因 |
|---|---|---|
| 摄影作品收藏 | JPEG / WebP | 照片压缩效率高，文件小 |
| 设计素材（透明背景） | PNG | 支持透明通道 |
| 网页截图 | PNG | 无损，文字清晰 |
| 动图/GIF 表情 | GIF | 唯一广泛支持的动图格式 |
| Logo/图标 | SVG | 矢量，可无限缩放 |
| 网页素材归档 | WebP | 体积最小，质量好 |
图片检测来源
FlowPick 从多个来源检测图片，覆盖页面中几乎所有可见图片：
| 来源 | 检测方式 | 典型场景 |
|---|---|---|
<img> 标签 | DOM 扫描 + 网络拦截 | 文章配图、产品图、头像 |
CSS background-image | 样式表解析 | 页面背景、卡片背景、Banner |
<picture> / <source> | DOM 扫描 | 响应式图片（不同屏幕不同尺寸） |
| 懒加载图片 | 滚动监听 | 图库、社交媒体时间线 |
| JavaScript 动态加载 | 网络拦截 | AJAX 加载的图集、瀑布流 |
| Canvas 导出 | 网络拦截 | 网页截图工具、在线编辑器 |
通过
<canvas> 元素直接渲染的图片（如 WebGL 游戏画面、Canvas 绘图）无法检测，因为它们不产生网络请求。如果网站使用 Canvas 渲染图片，请使用浏览器的右键保存功能。关于 Canvas 渲染的限制说明，请参阅 已知限制 — 检测范围限制。智能过滤
过滤功能帮助你在大量图片中快速找到目标，避免下载图标、缩略图等无用资源。
按尺寸过滤
设置最小宽度和高度，跳过小图标和装饰元素：
| 过滤器 | 默认值 | 说明 | 推荐设置 |
|---|---|---|---|
| 最小宽度 | 0 px | 过滤宽度小于此值的图片 | 200 px（排除图标） |
| 最小高度 | 0 px | 过滤高度小于此值的图片 | 200 px（排除页眉装饰） |
| 最小文件大小 | 0 KB | 过滤体积小于此值的图片 | 50 KB（排除占位图） |
按格式过滤
按图片类型筛选，快速定位目标格式：
| 过滤方式 | 说明 |
|---|---|
| 仅显示特定格式 | 勾选需要的格式（如仅 JPEG + PNG） |
| 排除某些格式 | 取消勾选不需要的格式（如排除 GIF） |
| 全选/全不选 | 快速切换所有格式 |
过滤组合示例
| 场景 | 过滤设置 |
|---|---|
| 保存摄影作品 | 最小宽度 800px + 仅 JPEG/WebP |
| 收集设计素材 | 仅 PNG + SVG |
| 下载表情包 | 仅 GIF + 最小文件大小 10KB |
| 归档网页截图 | 仅 PNG + 最小宽度 600px |
关于过滤配置的完整参数说明（最小文件大小、按时长过滤等），请参阅 配置参考 — 过滤配置。
批量下载
当页面上有大量图片时，批量下载可以一次性保存所有目标图片。
操作步骤
- 打开包含目标图片的网页
- 点击 FlowPick 图标，切换到 图片 标签页
- 设置过滤条件，筛选出需要的图片
- 勾选图片左侧的复选框（或点击 全选）
- 点击顶部的 下载所选 按钮
- 图片将依次下载到默认下载目录
批量下载技巧
- 先过滤再全选：设置好尺寸和格式过滤后，使用全选可以快速选中所有符合条件的图片
- 预览确认：下载前点击缩略图预览，确认图片内容
- 分批下载：如果图片数量超过 50 张，建议分批下载以避免浏览器卡顿
- 命名规则：下载的图片保留原始文件名，同名文件会自动添加序号
结合大小过滤（设置最小 50KB）可以排除缩略图和占位图片，只保留高清原图。关于批量下载的队列管理、并发控制和状态追踪，请参阅 批量下载。
图片预览
FlowPick 提供便捷的预览功能，帮助你在下载前确认图片内容。
| 功能 | 说明 |
|---|---|
| 缩略图网格 | 网格视图一目了然查看所有检测到的图片 |
| 点击放大 | 点击任意缩略图查看全尺寸预览 |
| 尺寸信息 | 显示图片的宽度 × 高度（像素） |
| 文件大小 | 显示预估的下载大小 |
| 格式标签 | 每张图片标注格式类型（JPEG/PNG/WebP 等） |
| 键盘导航 | 预览模式下使用 ← → 方向键切换图片，Esc 关闭 |
关于预览功能在实际使用中的操作方式，请参阅 使用方法 — 预览媒体。关于键盘快捷键的完整列表，请参阅 键盘快捷键。
故障排除
图片未检测到
| 原因 | 解决方案 |
|---|---|
| 图片尚未加载 | 向下滚动页面，触发懒加载 |
| 图片在 iframe 中 | 右键 iframe → 在新标签页中打开，然后在该页面使用 FlowPick |
| Canvas/WebGL 渲染 | 不支持，使用浏览器右键保存 |
| 图片通过 WebSocket 传输 | 不支持，WebSocket 不在检测范围内 |
| 页面在安装扩展前已加载 | 刷新页面 |
| 其他扩展冲突 | 暂时禁用广告拦截器后重试 |
下载的图片质量低
| 原因 | 解决方案 |
|---|---|
| 网站根据屏幕提供不同尺寸 | 在更大屏幕或缩放页面后重新检测 |
| 下载了缩略图而非原图 | 点击图片进入详情页/全尺寸视图后再检测 |
| 源文件本身分辨率低 | 无法改善，这是源文件的限制 |
| 网站使用了响应式图片 | 检查是否有更高分辨率的版本（<picture> 标签） |
下载的图片打不开
| 原因 | 解决方案 |
|---|---|
| 文件不完整 | 重新下载，确保下载过程未中断 |
| 格式不兼容 | 尝试使用其他图片查看器 |
| 文件实际不是图片 | 某些网站用图片 MIME 类型传输非图片数据 |
批量下载中断
| 原因 | 解决方案 |
|---|---|
| 浏览器内存不足 | 减少单次下载数量，分批下载 |
| 网络不稳定 | 检查网络连接后重试 |
| 服务器限流 | 等待一段时间后重试 |