如何使用 JavaScript 書籤下載所有圖片?

網路上充滿了我們經常希望下載的充滿活力的圖像,無論是照片、圖形還是插圖。雖然下載單一圖片很簡單,但從網頁抓取所有圖片可能很乏味。進入 JavaScript 小書籤 ,一個方便的工具,用於執行任務,例如只需單擊即可下載頁面上的所有圖像。在本文中,我們將探討什麼是小書籤、如何使用它們下載圖像,並深入探討它們的優缺點。

1. JavaScript 中的 Bookmarklet 是什麼?

一個 小書籤 是一個儲存為 Web 瀏覽器書籤的小型 JavaScript 程式。點擊時,它會直接在目前載入的網頁上執行其程式碼,讓您可以執行修改頁面外觀、自動執行任務或提取資訊等操作。

小書籤的主要特點:

  • 可移植性: 小書籤被儲存為書籤,並且可以在大多數瀏覽器上使用,無需額外的軟體。
  • 易於使用: 它們不需要任何技術設置;只需點擊書籤即可運行腳本。
  • 可自訂性: 由於它們是純 JavaScript,因此可以根據特定需求進行自訂。

小書籤通常用於快速解決方案,例如複製文字、更改 CSS 樣式,或在我們的例子中下載圖像。

2. 如何使用 JavaScript 書籤下載所有圖像

使用小書籤從網頁下載所有圖像涉及兩個步驟:建立小書籤並在目標頁面上使用它。

第 1 步:建立小書籤

• 複製以下程式碼:

javascript:(函數() {
const downloadImage = (url, 名稱) => {
const link = document.createElement('a');
連結.href = url;
連結.下載=名稱;
document.body.appendChild(連結);
連結.click();
document.body.removeChild(連結);
};

const images = Array.from(document.querySelectorAll('img'));
if (images.length === 0) {
alert('本頁未找到圖片。');
返回;
}

images.forEach((img, 索引) => {
const url = img.src;
const name = `image_${index + 1}.${url.split('.').pop() || 'jpg'}`;
下載圖片(網址,名稱);
});

Alert(`${images.length} 映像已下載。`);
})();

建立書籤:

  • 開啟瀏覽器的書籤管理員。
  • 新增書籤。
  • 將代碼貼到 網址 或者 地點 場地。
  • 將書籤命名為 Download Images

儲存書籤。

第 2 步:使用書籤

  • 導航至目標頁面: 開啟包含您要下載的圖像的網頁。
  • 點擊書籤: 選擇您的 Download Images 來自瀏覽器書籤列的書籤。
  • 觀察動作: 小書籤將循環瀏覽所有圖像( <img> 標籤)在頁面上並觸發每個標籤的下載。

3. 使用 JavaScript 書籤的優點和缺點

雖然小書籤很方便,但它們也有局限性,可能會促使您探索更強大的解決方案。下面分析一下它們的優缺點。

優點 缺點
  • 快速設定: 無需外部軟體或擴充 - 只需複製並貼上程式碼即可。
  • 瀏覽器相容性: 小書籤適用於大多數現代瀏覽器,包括 Chrome、Firefox、Safari 和 Edge。
  • 可客製化: 開發人員可以修改腳本來處理其他任務,例如重新命名檔案或過濾映像。
  • 無需安裝: 小書籤不需要任何額外的下載或權限。
  • 功能有限: 小書籤只能訪問可見的 <img> 元素。動態載入的圖像(例如,背景圖像或延遲載入的內容)通常會被跳過。
  • 無批量管理: 雖然它們下載多個圖像,但小書籤缺乏命名約定或資料夾管理等高級功能。
  • 安全限制: 現代瀏覽器實行嚴格的安全措施。小書籤可能無法在所有網站上無縫運行,尤其是那些具有內容安全策略 (CSP) 的網站。
  • 不可擴展: 對於大規模下載,例如相簿或高解析度圖庫,小書籤可能會變得低效。

4.最佳批量圖像下載器 – Imaget

如果您經常需要批量下載圖片, Imaget 是為此目的而設計的專用工具。它透過提供高級功能、改進的速度和更好的用戶體驗克服了小書籤的限制。 Imaget 允許從頁面下載數百張圖像並以其原始分辨率提取圖像。它可以在各種平台上無縫運行,包括 Instagram 等社交媒體網站, Facebook 和 Pinterest。

使用 Imaget 與 JavaScript 書籤相比,從網頁下載所有圖像更加簡單和有效率:

第 1 步:下載 Imaget 安裝程式與您的作業系統相容( Windows 或 macOS)並按照說明進行設置 Imaget 在您的裝置上。

第 2 步:與 Imaget 的瀏覽器,導航到包含要下載的圖像的網頁,然後點擊“ 自動滾螢幕 「 使...能夠 Imaget 掃描網頁並辨識所有影像。

自動捲動頁面以檢測影像

步驟 3:選擇要下載的圖像類型(例如,特定檔案類型,如 JPG、PNG 或 GIF)和解析度(例如,高清),並設定其他首選項,如輸出格式、下載位置等。

濾鏡

第 4 步:點擊 保存全部 按鈕啟動該過程,並且 Imaget 將處理一切,在幾秒鐘內下載所有選定的圖像。

批量保存網頁中的圖片

5. 結論

JavaScript 書籤對於需要快速且可自訂解決方案的精通技術的使用者來說是一個強大的工具。建立和使用書籤下載網頁上的所有圖像可以節省時間和精力,特別是對於休閒任務。然而,小書籤也有局限性,例如無法有效處理動態內容和管理大規模下載。

對於那些尋求更全面解決方案的人來說, Imaget 提供無與倫比的功能、速度和使用者友善性。無論您是從社交媒體、電子商務網站還是照片分享平台下載圖像, Imaget 確保您快速可靠地完成工作。雖然小書籤非常適合一次性任務, Imaget 是批量圖像下載的終極工具。

如果您重視效率和可擴展性,請給出 Imaget 今天就嘗試一下——它是滿足您所有批量下載需求的完美伴侶!