Javascript - 下载页面上的所有媒体答案

【问题标题】：Javascript - Downloading all Media on pageJavascript - 下载页面上的所有媒体
【发布时间】：2014-09-23 23:22:44
【问题描述】：

作为一个业余项目，我制作了一个图片库，用于解析页面中的媒体元素并将它们整齐地显示在页面上。我想创建一个选项，只需一个操作即可下载每个媒体对象。

假设一个页面上有 50 张图片，每张图片都不是本地托管的。有没有办法开始下载，将所有 50 个图像捆绑到一个文件夹/tar 中？

奖励积分：此时，所有媒体都已下载/加载到页面上。如果这个下载操作不需要重新获取每个对象的所有数据，那就太棒了。

【问题讨论】：

使用 javascript - 我不这么认为。
@Cracker0dks 我是这么认为的！
一种可能的方法客户端：通知查看器右键单击，选择“另存为...”-->选择“网页，完成”。可能的js方法：创建包含所有必需元素的单个页面blob，在a元素点击处提供页面下载。

标签： javascript jquery image download media

【解决方案1】：

好吧，你需要一个画布和一个 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
}

现在您在rawImages 中获得了base64 编码的图像数据。接下来，我们需要使用here 中描述的一种方法将数据转换为适当的二进制ArrayBuffer。

完成后，您可以构建自己的 tar/zip/whatever 打包程序，或使用 pako.js 之类的东西来组装包含您的数据的存档。允许用户下载数据的最后一件事是从生成的ArrayBuffer 和相应的ObjectURL 创建一个Blob。

【讨论】：

这很激烈。非常感谢您的回复！我会在这个周末继续这个项目并用我的结果更新这篇文章时尝试一下。