Javascript - 下載所有媒體

作爲一個側面項目，我做了一個圖片庫，爲媒體元素分析一個頁面並將它們整齊地顯示在頁面上。我想創建一個選項，只用一個動作下載每個媒體對象。Javascript - 下載所有媒體

想象一個頁面上有50個圖像，每個不是本地託管。有沒有辦法開始下載，所有50張圖像都捆綁到一個文件夾/ tar中？

獎勵積分：在這一點上，所有的媒體已經被下載/加載到頁面上。如果此下載操作不需要重新獲取每個對象的所有數據，那就太棒了。

2014-09-23 user3222102

用JavaScript - 我不這麼認爲。 – Cracker0dks 2014-09-23 23:36:42

@ Cracker0dks我確實這麼認爲！ – 2014-09-23 23:59:56

客戶端的一種可能的方法：通知瀏覽器右鍵單擊，選擇「另存爲...」 - >選擇「網頁，完成」。可能的js方法：創建包含所有必需元素的單個頁面的「blob」，在'a'元素點擊下載頁面。 – guest271314 2014-09-24 00:21:51

好吧做這樣你就需要一個帆布和2D背景的一件事：

var 
    mediaCanvas = document.getElementById('mediacanvas'), 
    mediaImages = document.getElementsByClassName('mediaimage'), 
    ctx = document.getElementById('drawcanvas').getContext('2d'), 
    rawImages = [], tmpImage, i 
;

然後爲每個圖像，你會做這樣的事情

for (i = 0; i < mediaImages.length; i++) { 
    tmpImage = mediaImages[i]; 
    // resize canvas to image size 
    canvas.width = tmpImage.width; 
    canvas.height = tmpImage.height; 
    ctx.drawImage(tmpImage, 0, 0); 
    // get base64 image data 
    rawImages.push(canvas.toDataURL('jpg')); // one could detect the original image type here 
}

現在你的base64編碼圖像數據在rawImages。接下來，我們需要使用here中描述的方法之一將數據轉換爲適當的二進制文件ArrayBuffer。

完成此操作後，您可以構建自己的tar/zip /無論打包器，還是使用類似pako.js的東西來組裝包含數據的存檔。允許用戶下載數據的最後一件事是從ArrayBuffer產生一個Blob和相應的ObjectURL。

來源

2014-09-24 00:28:38

這很激烈。非常感謝您的回覆！我會在本週末嘗試一下，當我繼續這個項目，並用我的結果更新這篇文章。 – user3222102 2014-09-25 00:16:19

Javascript - 下載所有媒體

回答

相關問題