Cordova/Phonegap 如何将 PNG 文件写入文件系统？

Question

这个问题也适用于 mp3 和 wav 文件。

我已经设置了一个 express.js 服务器，它基本上按如下方式发送所需的文件：

res.sendFile('someImage.png', {root: './images'});

然后在客户端，我收到图像：

var req = new XMLHttpRequest();
...
req.onreadystatechange = function(e) {
    if(req.readyState != 4) return;
    ...
    writeMyFile(null, e.target.response, someCallback);
}
...

所以在回复中我确实有我的文件。我想将此文件写入我的本地文件系统。我实现写如下：

var writeMyFile = function(err, file, someCallback) {
    this.dir.getFile('myImages/someImage.png', {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
             var blob = new Blob([file], {type: 'image/png'});
             fileWriter.write(blob);
        }, someCallback);
    }, someCallback);
};

执行这些后，我看到在 myImages 文件夹中创建了一个 png 文件。然而，它是原始文件大小的两倍，并且被操作系统视为已损坏。预览无法查看图像。 mp3/wav 文件也是如此，它们的大小是原来的两倍，不会在任何播放器上播放等等。

我在这里做错了什么？如何将这些文件适当地写入文件系统？

当文件是 json 对象时，上面的代码可以完美运行。我们怀疑可能存在编码问题，但目前还不知道如何修复。

最后，我使用了闭包编译器。

感谢您的帮助。

Answer 1

在解决这个问题之后，我找到了非常简单的解决方案。所以留在这里供以后参考。

在 Xhr 请求上，确保在发送请求之前将 responseType 设置为 arrayBuffer 或 blob。在我的例子中，它是 arrayBuffer 因为我已经有一个 blob 生成器可以对接收到的数据进行操作。即：

...
req.responseType = 'arraybuffer';
req.onreadystatechange = ...
req.send();

事实证明，blob 构造中的 Mime Type 不会影响要写入的这些二进制文件。就我而言，我可以将 mp3 歌曲完美地存储在我拥有 MIME 的地方：'image/png'。但是我不确定这是否有其他影响，我只是简单地说，无论我设置了哪种类型，文件都可以正常工作。

Cordova/Phonegap 如何将 PNG 文件写入文件系统？

Cordova/Phonegap How to write a PNG file to Filesystem?

image

binary-data

fileapi

express

cordova