html 5 + webkitRequestFileSystem:从用户保存图像文件

html 5 + webkitRequestFileSystem: save image file from user

本文关键字:用户 保存 图像 文件 webkitRequestFileSystem html      更新时间:2023-09-26

使用webkitRequestFileSystem,我想做一些非常简单的事情:从用户获取文件,将其保存到浏览器本地文件系统,并在以后使用它(例如作为图像src等)

我读了关于webkitRequestFileSystem,但我没有找到任何关于从用户克隆文件(也许我错过了它?)。

所以我尝试了一个天真的实现读取,获取文件,写入,一切似乎都行得通(调用成功回调),我可以看到一个chrome扩展文件(HTML5文件系统资源管理器),但当我尝试使用图像url它显示一个破碎的图像图标。

下面是克隆文件的代码片段(有点,必须清理一下):

var src_file = .... <-- got it from user
filesystem.root.getFile("output.png", {create: true}, function(dest_file)
{
            var reader = new FileReader();
            reader.onerror = function() {alert("ERROR")};
            reader.onload = function(e)
            {
                read_buffer = e.target;
                dest_file.createWriter(function(fileWriter) {
                    var blob = new Blob([read_buffer.result], {type: 'application/octet-stream'});  // <-- also tried "image/png" etc..
                    fileWriter.onerror = function() {alert("ERROR2")};
                    fileWriter.onwriteend = function(writer)
                    {
                        alert("SUCCESS!");
                    };
                    fileWriter.write(blob);
                },  function() {alert("ERROR3")});
            };
            reader.readAsBinaryString(src_file);
});

PS我工作在本地主机,这是一个问题吗?

谢谢!

回答自己:应该使用readAsArrayBuffer()而不是readAsBinaryString()…真是浪费时间:/