Question

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

所以想象一下，一个页面上有50个图像，每个图像都没有在本地托管。有没有办法开始下载所有50个图像捆绑在一起的文件夹/ tar？

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

Answer 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 /任何打包程序，也可以使用pako.js之类的内容来组合包含数据的存档。允许用户下载数据的最后一件事是从生成的ArrayBuffer和相应的Blob创建ObjectURL。

Javascript - 在页面上下载所有媒体

1 个答案: