如何利用火狐控制台下載網頁圖片

本文轉載自查看原文 2015-01-07 16:36 2136 firebug/ 火狐控制台/ Firebug 控制台/ JS/jQuery/ 網頁圖片下載/ PHP/ 火狐

今天在群里看到一個群友的問題，怎么下載網頁的圖片，經過一番的演變，得出了本文的成果，也算是一種思路，還可以演變成干很多事，因此寫下此文，希望能夠對大家有所啟發。

問題：

如何從一個網頁里下載瀏覽器加載出來的圖片？

思考思路：

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>';