快捷導(dǎo)航

jszip插件實現(xiàn)圖片打包下載的方法分析原創(chuàng)

原創(chuàng) 更新時間：2023年05月19日 09:15:46 原創(chuàng) 投稿：shichen2014

這篇文章主要介紹了jszip插件實現(xiàn)圖片打包下載的方法,結(jié)合實例形式分析了JavaScript使用jszip插件依據(jù)圖片列表打包下載zip壓縮文件的相關(guān)操作技巧,需要的朋友可以參考下

前言

由于后端使用php、node.js、java等進行大量的圖片下載操作可能會導(dǎo)致服務(wù)器負(fù)載過高，所以將圖片下載轉(zhuǎn)移到客戶端是個不錯的選擇，借助 HTML5 中的新特性 Blob 和 URL.createObjectURL API 實現(xiàn)。

實現(xiàn)代碼

function download(){
  var urls = [
    "https://example.com/img1.jpg",
    "https://example.com/img2.png"
  ];
  var zip = new JSZip();
  var count = 0;
  urls.forEach((url, index) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (xhr.status === 200) {
        var name = url.substring(url.lastIndexOf("/") + 1);
        zip.file(name, xhr.response);
      }
      count++;
      if (count === urls.length) {
        zip.generateAsync({type:"blob"}).then(function(content) {
          saveAs(content, "pictures.zip");
          console.log("下載成功");
        });
      }
    };
    xhr.send();
  });
}

另外，注意：在頁面頂部還需要引入jszip插件

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
</head>

這樣可以將圖片下載過程從服務(wù)器轉(zhuǎn)移到客戶端，從而減輕服務(wù)器壓力。同時需要注意的是，在使用客戶端進行大量圖片下載時，也要防止網(wǎng)絡(luò)請求并發(fā)數(shù)量過多導(dǎo)致瀏覽器崩潰。

您可能感興趣的文章:

相關(guān)文章

JS也玩OO繼承
JS也玩OO繼承...
2007-01-01
DeviceOne 讓你一見鐘情的App快速開發(fā)平臺
DeviceOne是一個非常先進的App開發(fā)平臺，使用Javascript 構(gòu)建原生體驗的移動應(yīng)用程序，DeviceOne主要關(guān)注外觀和體驗，以及和你的應(yīng)用程序的 UI 交互
2016-02-02
js實現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的3種方式舉例
在JavaScript中將圖片的絕對路徑轉(zhuǎn)換為base64字符串或blob對象,是常見的圖片上傳前的預(yù)處理步驟,這篇文章主要介紹了js實現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的3種方式,需要的朋友可以參考下
2025-04-04
一文詳解如何用原型鏈的方式實現(xiàn)JS繼承
JavaScript中，每當(dāng)創(chuàng)建一個對象，都會給這個對象提供一個內(nèi)置對象 [[Prototype]] 。這個對象就是原型對象，[[Prototype]] 的層層嵌套就形成了原型鏈。本文將詳細(xì)講解如何用原型鏈的方式實現(xiàn)一個 JS 繼承，感興趣的可以了解下
2022-04-04
WebSocket的通信過程與實現(xiàn)方法詳解
這篇文章主要給大家愛介紹了關(guān)于WebSocket的通信過程與實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧
2018-04-04
微信小程序開發(fā)指南之圖片壓縮解決方案
在項目開發(fā)過程中遇到一個需要從小程序上傳圖片的需求,此需求實現(xiàn)起來并不難,下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)指南之圖片壓縮解決方案的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
JavaScript實現(xiàn)定時頁面跳轉(zhuǎn)功能示例
這篇文章主要介紹了JavaScript實現(xiàn)定時頁面跳轉(zhuǎn)功能,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)自定義函數(shù)功能操作技巧,需要的朋友可以參考下
2017-02-02
JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實例形式較為詳細(xì)的分析了showModalDialog常見用法與相關(guān)使用技巧,需要的朋友可以參考下
2017-03-03
項目實踐之javascript技巧
項目實踐之javascript技巧...
2007-12-12
js代碼實現(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了js代碼實現(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05