摘要：
复制所有图像链接。3.使用控制台解析现有html中的img标记。jQuery版本获取页面图像链接并请求下载文件$（“img”）。每个（function（）{window.open（'http:file='+encodeURIComponent（$（this）.attr（“src”））；
今天在群里看到一个群友的问题，怎么下载网页的图片，经过一番的演变，得出了本文的成果，也算是一种思路，还可以演变成干很多事，因此写下此文，希望能够对大家有所启发。
问题：
如何从一个网页里下载浏览器加载出来的图片？
思考思路：
1、利用Ctrl+S保存，取出里面的图片
2、通过火狐控制台的网络面板，复制所有图片链接
3、利用控制台执行解析现有html里的img标签，得到它的链接
4、利用第3点得到的链接，直接借助js请求一个代理下载地址，帮忙下载图片文件
本文便是基于第4点实现。
第一步 获取页面图片链接并请求下载文件
获取所有img标签的链接，无论jQuery还是原生javascript都能做到，下面是它们的实现代码：
jQuery版获取页面图片链接并请求下载文件
$("img").each(function(){
window.open('http://localhost/downloadImg.php?file='+encodeURIComponent($(this).attr("src")));
});
原生javascript版获取页面图片链接并请求下载文件
var tags = document.getElementsByTagName("img");
for (var i = 0; i < tags.length; i++) {
window.open('http://localhost/downloadImg.php?file='+encodeURIComponent(tags[i].src));
}
第二步 文件代理下载程序
<?php
/**
* 图片代理下载程序
* @filename downloadImg.php
* @author Zjmainstay
* @website http://www.zjmainstay.cn
* @usage 存储于http://localhost目录下
*/
$filename = urldecode($_GET['file']);
if(preg_match('#/([^/]+)$#i', $filename, $match)) {
$dir = dirname(__FILE__) . '/downloadImg/';
if(!is_dir($dir)) @mkdir($dir, 0755);
$saveFile = $dir . $match[1];
file_put_contents($saveFile, file_get_contents($filename));
echo "Success!";
} else {
echo "Fail!";
}
//自动关闭窗口程序（打开窗口过多，不友好）
echo '<script type="text/javascript">window.close();</script>';
第三步 实操下载
- F12打开火狐Firebug控制台，结果如图（一）所示
如果你发现F12打开跟图片不一样，那么你需要安装Firebug：
菜单-工具-附加组件-右上角搜索"Firebug"-安装（Ctrl+Shift+A可快速打开附加组件窗口）
- 输入第一步的js代码并运行，结果如图（二）所示
- 查看
http://localhost目录下的downloadImg目录，结果如图（三）所示
附：重要提示
这个代理下载功能（downloadImg.php）切不可对外开放，否则可能被人利用，代理下载携带php后门的图片文件，再结合其他的漏洞利用攻击你的服务器。
（本文完）
转载请附带本文原文地址：如何利用火狐控制台实现网页图片下载，首发自 Zjmainstay学习笔记