巨大的JavaScript HTML5 blob(来自大型ArrayBuffers),可在客户端构建大型文件

斯蒙达

我正在编写一个Web浏览器应用程序(客户端),该应用程序可从许多位置下载大量块并将其加入以构建Blob。然后将该Blob作为通用文件保存到本地文件系统。我这样做的方法是通过ArrayBuffer对象和Blob。

var blob = new Blob([ArrayBuffer1, ArrayBuffer2, ArrayBuffer3, ...], {type: mimetype})

这对于中小型文件(直到700 MB aprox)正常工作,但是浏览器会崩溃并显示较大的文件。我了解RAM内存有其局限性。情况是,我需要构建Blob才能生成文件,但我想允许用户下载比该大小大得多的文件(例如,想象一下8GB的文件)。

¿如何建立Blob以避免大小限制?LocalStorage比RAM更受限制,因此我不知道该使用什么或如何做。

亚瑟·韦伯

看来您只是将数据数组串联在一起?为什么不将数组缓冲区附加到一个巨大的Blob中呢?您必须一次迭代并追加每个arrayBuffer一次。您将seek在文件编写器的末尾追加数组。为了只读取一部分巨型Blob,您可以获取sliceBlob的一部分,以避免浏览器崩溃。

追加功能

function appendToFile(fPath,data,callback){
    fs.root.getFile(fPath, {
        create: false
    }, function(fileEntry) {
        fileEntry.createWriter(function(writer) {
            writer.onwriteend = function(e) {
                callback();
            };
            writer.seek(writer.length);
            var blob = new Blob([data]);
            writer.write(blob);
        }, errorHandler);
    }, errorHandler);
}

同样,为避免回读整个Blob,在生成您提及的文件时,仅读取巨型Blob的部分/块。

部分读取功能

function getPartialBlobFromFile(fPath,start,stop,callback){
    fs.root.getFile(fPath, {
        creation:false
    }, function(fileEntry){
        fileEntry.file(function(file){
            var reader = new FileReader();
            reader.onloadend = function(evt){
                if(evt.target.readyState == FileReader.DONE){
                    callback(evt.target.result);
                }
            };
            stop = Math.min(stop,file.size);
            reader.readAsArrayBuffer(file.slice(start,stop));
        }, errorHandler)
    }, errorHandler);
}

您可能必须保留索引,也许要保留在巨型BLOB的标头部分中-在提供更精确的反馈之前,我需要了解更多信息。


更新-避免配额限制, 响应下面的评论 ,临时还是永久
由于使用临时存储,您似乎遇到了存储配额问题。以下是从谷歌借来的片段发现这里

临时存储在浏览器中运行的所有Web应用程序之间共享。共享池最多可以占可用磁盘空间的一半。应用程序已使用的存储空间包含在共享池的计算中;也就是说,计算基于(可用存储空间+应用程序正在使用的存储空间)* .5。

每个应用程序最多可拥有20%的共享池。例如,如果总可用磁盘空间为50 GB,则共享池为25 GB,并且该应用程序最多可具有5 GB。这是根据可用磁盘空间(50 GB)一半(最多25 GB)的20%(最多5 GB)计算的。

为了避免此限制,您必须切换到持久性,它将允许您配额最多磁盘上的可用空间。为此,请使用以下命令初始化文件系统,而不是临时存储请求。

navigator.webkitPersistentStorage.requestQuota(1024*1024*5, 
  function(gB){
  window.requestFileSystem(PERSISTENT, gB, onInitFs, errorHandler);
}, function(e){
  console.log('Error', e);
})

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

从JavaScript / HTML5目录中加载所有文件

来自分类Dev

上传文件大小问题(HTML5,Javascript,PHP)

来自分类Dev

html5使用javascript上传多个文件

来自分类Dev

从JavaScript / HTML5目录中加载所有文件

来自分类Dev

在 .exe 中打包 HTML5 + Javascript 文件

来自分类Dev

HTML5 - 上传文件而不在客户端处理

来自分类Dev

HTML5 canvas javascript

来自分类Dev

HTML5 Javascript画笔

来自分类Dev

HTML5 JavaScript画笔

来自分类Dev

HTML5 Javascript画笔

来自分类Dev

HTML5 canvas javascript

来自分类Dev

Javascript可在“已插入”的html代码上停止HTML5视频的播放

来自分类Dev

大型视频html5背景

来自分类Dev

大型视频html5背景

来自分类Dev

如何在javascript / HTML5 / NodeJS中实现客户端-服务器-客户端基础结构的想法

来自分类Dev

是HTML5 = HTML + CSS + Javascript

来自分类Dev

如何在angular js和html5中显示来自javascript对象的特定代码的名称

来自分类Dev

使用JavaScript / HTML5嵌入来自http://api.liveviewtech.com的在线视频

来自分类Dev

如何在angular js和html5中显示来自javascript对象的特定代码的名称

来自分类Dev

来自 <input type="date" /> 的 Html5 javascript gettime(),奇怪的工作

来自分类Dev

如何响应性地获取 Javascript 以验证来自 HTML5 表单文本框的信息?

来自分类Dev

扫描文件夹内的文本文件名 HTML5/Javascript

来自分类Dev

html5 / Javascript-如何获取选定的文件夹名称?

来自分类Dev

将HTML5 Canvas + Javascript应用程序转换为可执行文件

来自分类Dev

在HTML5应用中,如何使用javascript检查文件是否存在?

来自分类Dev

如何在javascript中获取HTML5 Canvas.todataurl文件大小?

来自分类Dev

如何使用HTML5 / Javascript下载和显示文本文件?

来自分类Dev

如何使用HTML5和Javascript同时读取两个文本文件

来自分类Dev

创建外部JavaScript文件并在HTML5画布上调用

Related 相关文章

  1. 1

    从JavaScript / HTML5目录中加载所有文件

  2. 2

    上传文件大小问题(HTML5,Javascript,PHP)

  3. 3

    html5使用javascript上传多个文件

  4. 4

    从JavaScript / HTML5目录中加载所有文件

  5. 5

    在 .exe 中打包 HTML5 + Javascript 文件

  6. 6

    HTML5 - 上传文件而不在客户端处理

  7. 7

    HTML5 canvas javascript

  8. 8

    HTML5 Javascript画笔

  9. 9

    HTML5 JavaScript画笔

  10. 10

    HTML5 Javascript画笔

  11. 11

    HTML5 canvas javascript

  12. 12

    Javascript可在“已插入”的html代码上停止HTML5视频的播放

  13. 13

    大型视频html5背景

  14. 14

    大型视频html5背景

  15. 15

    如何在javascript / HTML5 / NodeJS中实现客户端-服务器-客户端基础结构的想法

  16. 16

    是HTML5 = HTML + CSS + Javascript

  17. 17

    如何在angular js和html5中显示来自javascript对象的特定代码的名称

  18. 18

    使用JavaScript / HTML5嵌入来自http://api.liveviewtech.com的在线视频

  19. 19

    如何在angular js和html5中显示来自javascript对象的特定代码的名称

  20. 20

    来自 <input type="date" /> 的 Html5 javascript gettime(),奇怪的工作

  21. 21

    如何响应性地获取 Javascript 以验证来自 HTML5 表单文本框的信息?

  22. 22

    扫描文件夹内的文本文件名 HTML5/Javascript

  23. 23

    html5 / Javascript-如何获取选定的文件夹名称?

  24. 24

    将HTML5 Canvas + Javascript应用程序转换为可执行文件

  25. 25

    在HTML5应用中,如何使用javascript检查文件是否存在?

  26. 26

    如何在javascript中获取HTML5 Canvas.todataurl文件大小?

  27. 27

    如何使用HTML5 / Javascript下载和显示文本文件?

  28. 28

    如何使用HTML5和Javascript同时读取两个文本文件

  29. 29

    创建外部JavaScript文件并在HTML5画布上调用

热门标签

归档