javascript - 通过 Filesystem API 导出文件时 Chrome 崩溃

Question

我正在尝试运行使用 jQuery 1.10.2 和 CryptoJS 3.2.1 的浏览器内加密应用程序我面临的问题始于大约 2mb 的文件。文件可以很好地加密，但是当为文件创建数据 URI 时它会使浏览器崩溃。

我想要一个解决这个问题的方法，可以在浏览器不崩溃的情况下加密最大 50mb 的文件。

这是当前负责通过 FileReader API 保存文件的片段

var reader = new FileReader();

        if(body.hasClass('encrypt')){

            // Encrypt the file!

            reader.onload = function(e){

                // Use the CryptoJS library and the AES cypher to encrypt the 
                // contents of the file, held in e.target.result, with the password

                var encrypted = CryptoJS.AES.encrypt(e.target.result, password);

                // The download attribute will cause the contents of the href
                // attribute to be downloaded when clicked. The download attribute
                // also holds the name of the file that is offered for download.

                a.attr('href', 'data:application/octet-stream,' + encrypted);
                a.attr('download', file.name + '.encrypted');

                step(4);
            };

            // This will encode the contents of the file into a data-uri.
            // It will trigger the onload handler above, with the result

            reader.readAsDataURL(file);
        }
        else {

            // Decrypt it!

            reader.onload = function(e){

                var decrypted = CryptoJS.AES.decrypt(e.target.result, password)
                                        .toString(CryptoJS.enc.Latin1);

                if(!/^data:/.test(decrypted)){
                    alert("Invalid pass phrase or file! Please try again.");
                    return false;
                }

                a.attr('href', decrypted);
                a.attr('download', file.name.replace('.encrypted',''));

                step(4);
            };

            reader.readAsText(file);
        }

我可以在上面的代码中更改什么以允许加密和解密更大的文件？

实时站点:droplet.so (目前上限为 1.5mb，否则肯定会导致浏览器崩溃)

提前致谢。

Answer 1

通过一些研究，我发现 1.99MB 是 chrome 数据 url 中可以保存的最大值。

您的问题可以通过将您的数据 url 转换为 blob 来解决

您可以在此处找到更多信息: Blob from DataURL?

Chrome crashes when URI is too long这里有类似的帖子吗(见第二个答案)。

编辑:

可能的解决方案

function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);

  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }

  var bb = new BlobBuilder();
  bb.append(ab);
  return bb.getBlob(mimeString);
}

function download(dataURI) {
    var blob = dataURItoBlob(dataURI);
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

您可以通过调用 download(dataURI) 来使用此代码。