使用JavaScript實(shí)現(xiàn)獲取頁(yè)面上所有的img并保存本地
瀏覽器的 JavaScript 環(huán)境中受限于安全和隱私原因,不允許直接指定下載文件夾或訪(fǎng)問(wèn)本地文件系統(tǒng)。因此,無(wú)法通過(guò)純 JavaScript 在瀏覽器控制臺(tái)中實(shí)現(xiàn)下載圖片到指定文件夾的功能。
然而,您可以使用 Web API 提供的文件系統(tǒng)訪(fǎng)問(wèn) API 進(jìn)行一定程度的操作,但需要用戶(hù)手動(dòng)確認(rèn)和操作。以下是一個(gè)在支持文件系統(tǒng)訪(fǎng)問(wèn) API 的瀏覽器(如 Chrome)中使用的示例腳本:
(async () => { // 獲取所有圖像元素 const images = document.querySelectorAll("img"); // 文件系統(tǒng)訪(fǎng)問(wèn) API:請(qǐng)求用戶(hù)選擇下載文件夾 const dirHandle = await window.showDirectoryPicker(); for (let [index, img] of images.entries()) { try { const url = img.src; const response = await fetch(url); const blob = await response.blob(); // 獲取圖片的 MIME 類(lèi)型并確定文件擴(kuò)展名 const contentType = blob.type; let extension = contentType.split("/")[1]; // 從 MIME 類(lèi)型中提取文件擴(kuò)展名 // 特別處理 SVG 圖片格式 if (contentType === "image/svg+xml") { extension = "svg"; } const fileName = `${index + 1}.${extension}`; // 創(chuàng)建并寫(xiě)入文件 const fileHandle = await dirHandle.getFileHandle(fileName, { create: true, }); const writable = await fileHandle.createWritable(); await writable.write(blob); await writable.close(); console.log(`Downloaded: ${fileName}`); } catch (error) { console.error(`Failed to download image ${index + 1}:`, error); } } })();
此腳本的工作方式如下:
- 獲取當(dāng)前頁(yè)面的所有
img
標(biāo)簽。 - 使用文件系統(tǒng)訪(fǎng)問(wèn) API 請(qǐng)求用戶(hù)選擇下載文件夾(此操作需要用戶(hù)確認(rèn))。
- 遍歷每個(gè)圖片 URL,使用
fetch
函數(shù)獲取圖片數(shù)據(jù)。 - 在用戶(hù)選擇的文件夾中創(chuàng)建對(duì)應(yīng)的文件,并將圖片數(shù)據(jù)寫(xiě)入文件。
請(qǐng)注意,此方法僅在支持文件系統(tǒng)訪(fǎng)問(wèn) API 的瀏覽器(如 Chrome)中可用,并且用戶(hù)需要手動(dòng)確認(rèn)并選擇下載文件夾。
要在瀏覽器控制臺(tái)中執(zhí)行此腳本,請(qǐng)按照以下步驟操作:
- 打開(kāi)你要下載圖片的網(wǎng)頁(yè)。
- 按
F12
或Ctrl + Shift + I
(Windows)或Cmd + Option + I
(Mac)打開(kāi)開(kāi)發(fā)者工具。 - 選擇“Console”標(biāo)簽頁(yè)。
- 將上面的腳本代碼粘貼到控制臺(tái)中,然后按
Enter
鍵執(zhí)行。
執(zhí)行腳本時(shí),瀏覽器會(huì)彈出文件夾選擇對(duì)話(huà)框,用戶(hù)選擇文件夾后,腳本會(huì)自動(dòng)將所有圖片下載并保存到該文件夾中。
知識(shí)補(bǔ)充
除了上文的內(nèi)容,小編還為大家整理了使用js腳本一鍵下載網(wǎng)頁(yè)所有圖片的方法,希望對(duì)你有所幫助
測(cè)試環(huán)境:Chrome開(kāi)發(fā)者模式下(啟動(dòng)Chrome,按F12即可)
測(cè)試網(wǎng)頁(yè):知乎某問(wèn)題
原理很簡(jiǎn)單,用到了a標(biāo)簽的href及download屬性和點(diǎn)擊事件。
完整代碼
//一個(gè)對(duì)象,存儲(chǔ)頁(yè)面圖片數(shù)量和下載的數(shù)量 var monitorObj = { imgTotal: 0, imgLoaded: 0 } //創(chuàng)建a標(biāo)簽,賦予圖片對(duì)象相關(guān)屬性,并插入body var createA = function (obj) { var a = document.createElement("a"); a.id = obj.id; a.target = "_blank";//注意:要在新頁(yè)面打開(kāi) a.href = obj.url; a.download = obj.url; document.body.appendChild(a); } //獲取頁(yè)面的圖片 var imgs = document.images; //創(chuàng)建每個(gè)圖片對(duì)象的對(duì)應(yīng)a標(biāo)簽 for (var i = 0; i < imgs.length;i++){ var obj = { id: "img_" + i, url: imgs[i].src } //過(guò)濾掉不屬于這幾種類(lèi)型的圖片 if (["JPG", "JPEG", "PNG","GIF"].indexOf(obj.url.substr(obj.url.lastIndexOf(".")+1).toUpperCase()) < 0) { continue; } //這里是為了去掉知乎用戶(hù)頭像的圖片,頭像大小是50*50 if (imgs[i].width <= 50 || imgs[i].height <= 50) { continue; } //統(tǒng)計(jì)圖片數(shù)量 monitorObj.imgTotal++; createA(obj); } //開(kāi)始下載圖片 for (var i = 0; i < imgs.length; i++) { if (document.getElementById("img_" + i)) { //重點(diǎn):觸發(fā)a標(biāo)簽的click事件 document.getElementById("img_" + i).click(); monitorObj.imgLoaded++; //統(tǒng)計(jì)已下載的圖片數(shù)量 } } console.log("已下載:"+monitorObj.imgLoaded + "/" + monitorObj.imgTotal);
到此這篇關(guān)于使用JavaScript實(shí)現(xiàn)獲取頁(yè)面上所有的img并保存本地的文章就介紹到這了,更多相關(guān)JavaScript獲取頁(yè)面img內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
XHTML-Strict 內(nèi)允許出現(xiàn)的標(biāo)簽
XHTML-Strict 內(nèi)允許出現(xiàn)的標(biāo)簽...2006-12-12JavaScript 函數(shù)的執(zhí)行過(guò)程
下面小編就為大家?guī)?lái)一篇JavaScript 函數(shù)的執(zhí)行過(guò)程。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05layer子層給父層頁(yè)面元素賦值,以達(dá)到向父層頁(yè)面?zhèn)髦档男Ч麑?shí)例
下面小編就為大家?guī)?lái)一篇layer子層給父層頁(yè)面元素賦值,以達(dá)到向父層頁(yè)面?zhèn)髦档男Ч麑?shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09Three.js物理引擎Cannon.js創(chuàng)建簡(jiǎn)單應(yīng)用程序
這篇文章主要為大家介紹了Three.js物理引擎Cannon.js創(chuàng)建簡(jiǎn)單應(yīng)用程序詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04用ajax實(shí)現(xiàn)的自動(dòng)投票的代碼
用ajax實(shí)現(xiàn)的自動(dòng)投票的代碼...2007-03-03uniapp自定義頁(yè)面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼
有些頁(yè)面加載起來(lái)比較慢,為了加強(qiáng)用戶(hù)體驗(yàn)效果,所以一般都會(huì)做一個(gè)頁(yè)面加載等待的提示,頁(yè)面加載完成后消失,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義頁(yè)面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-06-06javascript實(shí)現(xiàn)九宮格相加數(shù)值相等
這篇文章主要介紹了javascript實(shí)現(xiàn)九宮格相加數(shù)值相等的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02深入理解JavaScript和TypeScript中的class
class 聲明創(chuàng)建一個(gè)基于原型繼承的具有給定名稱(chēng)的新類(lèi),下面這篇文章主要給大家介紹了關(guān)于JavaScript和TypeScript中class的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2018-04-04