下面我将为你详细分解这个过程,从简单到复杂，并提供多种方法和工具。
（图片来源网络，侵删）
核心思路
获取JS图片的关键在于理解图片是如何被加载的，然后在加载的时机“截获”它，主要有以下几种情况：
- 直接存在于HTML中：最简单的情况，图片的
src属性直接写在HTML标签里，这种图片不算JS图片，但可以先尝试获取。 - 通过
<script>标签加载：图片的URL或数据被硬编码在某个.js文件里。 - 通过JavaScript动态创建：页面加载后，JS代码会动态创建
<img>标签，并设置其src。 - 通过JavaScript异步加载：JS代码会使用
fetch、axios或XMLHttpRequest等技术，从服务器获取图片数据。 - 懒加载：图片初始时没有
src，当用户滚动到特定位置时，JS才会设置src来加载图片。
使用浏览器开发者工具（最常用、最直接）
这是最推荐的方法,因为它能让你直观地看到网页的加载过程和网络请求。
步骤详解：
-
打开目标网站：在浏览器中打开你想要获取图片的网页。
-
打开开发者工具：
（图片来源网络，侵删）- 按
F12键。 - 或者右键点击页面,选择“检查”。
- 按
-
切换到“网络”标签页：在开发者工具的工具栏中找到并点击“Network”。
-
筛选请求类型：在“网络”标签页的筛选器中，点击“JS”按钮，这样列表中只会显示JavaScript文件相关的请求，你也可以勾选“Img”来显示图片请求，方便对比。
-
刷新页面：按
F5或Ctrl+R刷新页面，这一步至关重要，因为它会重新加载所有资源，包括动态加载的JS和图片，你会看到网络请求列表中充满了各种请求。 -
定位JS文件：在筛选后的JS文件列表中，找到你可能感兴趣的文件，如果你不确定是哪个，可以：
（图片来源网络，侵删）- 按名称猜测：文件名可能包含
image,slider,gallery,avatar等关键词。 - 按大小排序：包含大量图片数据的JS文件通常会比较大。
- 按时间排序：查看在页面加载后期才发起的请求，这些很可能是动态加载的。
- 按名称猜测：文件名可能包含
-
检查JS文件内容：点击一个可疑的JS文件，在弹出的窗口中切换到“标头”、“预览”或“响应”标签页，查看其内容。
- 在“响应”或“预览”标签页中，直接搜索图片URL的常见模式，如
http、https、.jpg、.png等。 - 你可能会找到类似这样的URL：
https://example.com/images/item_12345.webp。
- 在“响应”或“预览”标签页中，直接搜索图片URL的常见模式，如
-
查找动态创建的图片请求：
- 回到“网络”标签页，这次不要筛选“JS”，而是筛选“All”或“Img”。
- 在页面上进行一些操作,比如点击一个按钮、滚动页面等，观察网络请求列表中是否突然出现了新的图片请求，这个请求的来源很可能就是某个JS文件触发的。
-
从DOM中查找：
- 切换到“元素”标签页。
- 按
Ctrl+F(或Cmd+Fon Mac) 打开搜索框。 - 搜索
<img，你会看到页面中所有的<img>- 检查这些标签的
src属性，如果某个<img>标签是后来才出现的，它的src很可能就是JS动态设置的，你可以右键点击这个元素，选择“复制” -> “复制图片地址”。 - 检查这些标签的
使用命令行工具（适合批量下载）
如果你已经通过方法一找到了图片URL的模式,并且需要批量下载，那么使用命令行工具会更高效。
常用工具：wget 或 curl
假设你已经发现图片URL的格式是 https://example.com/data/img_<number>.jpg，其中<number>是从1到100的数字。
使用 wget (推荐):
# 使用通配符下载
wget -r -l1 -nd -A "jpg" -R "html" "https://example.com/data/img_*.jpg"
# 或者更精确地，先构建URL列表再下载
for i in {1..100}; do
wget "https://example.com/data/img_${i}.jpg"
done
参数解释:
-r: 递归下载。-l1: 只下载一层链接。-nd: 不创建目录，所有文件都下载到当前目录。-A "jpg": 只接受后缀为jpg的文件。-R "html": 排除后缀为html的文件。
使用 curl 和 xargs:
# 生成URL列表，然后并行下载
seq -f "https://example.com/data/img_%03g.jpg" 1 100 | xargs -P 5 -I {} curl -O {}
seq: 生成序列。xargs: 将URL列表作为参数传递给curl。-P 5: 并行执行5个任务，提高下载速度。-O: 将输出保存为文件，文件名从URL中获取。
编写浏览器扩展（最强大、最灵活）
如果网站的保护非常严密,或者你需要自动化的、长期的任务，编写一个简单的浏览器扩展是最佳选择。
基本思路：
- 创建一个
manifest.json文件：这是扩展的配置文件。 - 编写一个
content.js脚本：这个脚本会在目标网页上运行，可以访问和修改页面的DOM。 - 监听图片加载事件：在
content.js中，使用MutationObserver来监听DOM的变化，当发现有新的<img>标签被添加时，就获取它的src。
简单示例 (manifest.json):
{
"manifest_version": 3,
"name": "JS Image Downloader",
"version": "1.0",
"description": "Extracts images loaded by JavaScript.",
"permissions": [
"activeTab",
"scripting",
"downloads"
],
"host_permissions": [
"https://*.target-website.com/*"
],
"content_scripts": [
{
"matches": ["https://*.target-website.com/*"],
"js": ["content.js"]
}
]
}
简单示例 (content.js):
// 使用 MutationObserver 监听DOM变化
const observer = new MutationObserver((mutationsList, observer) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
// 检查新添加的节点
for (const node of mutation.addedNodes) {
// 如果新添加的是 img 标签
if (node.nodeName === 'IMG') {
const imageUrl = node.src;
if (imageUrl && imageUrl.startsWith('http')) {
console.log('Found new image:', imageUrl);
// 调用下载函数
downloadImage(imageUrl);
}
}
// 如果新添加的节点包含 img 子标签
const images = node.getElementsByTagName('img');
for (const img of images) {
const imageUrl = img.src;
if (imageUrl && imageUrl.startsWith('http')) {
console.log('Found new image (child):', imageUrl);
downloadImage(imageUrl);
}
}
}
}
}
});
// 开始观察整个文档 body 的变化
observer.observe(document.body, {
childList: true, // 观察子节点的添加或删除
subtree: true // 观察所有后代节点
});
// 下载图片的函数 (需要 "downloads" 权限)
function downloadImage(url) {
chrome.downloads.download({
url: url,
filename: 'downloaded_images/' + url.split('/').pop(), // 从URL中提取文件名
saveAs: false
});
}
总结与建议
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 浏览器开发者工具 | 直观、无需安装、能实时交互 | 手动操作，不适合批量下载 | 快速检查、调试、一次性获取少量图片 |
| 命令行工具 | 高效、适合批量下载、可自动化 | 需要先手动获取URL模式 | 已知图片URL规律，需要大量下载 |
| 浏览器扩展 | 功能强大、自动化程度高、可长期运行 | 开发成本高，需要一定的编程知识 | 复杂网站、需要长期监控或自动化任务的场景 |
给你的建议：
- 先从“浏览器开发者工具”开始，这是最基础也是最重要的技能。
- 如果只是想下载几张图,手动复制链接用下载工具下载最快。
- 如果发现图片URL有规律（如
img_1.jpg,img_2.jpg...），立刻切换到wget或curl。 - 如果网站非常复杂,图片加载逻辑嵌套很深，或者你需要一个“一键下载”的解决方案，再考虑开发浏览器扩展。
