html - 使用 requestFileSystem 和 toUrl() 函数显示图像

Question

我制作了一个使用 requestFileSystem 的应用程序。一切正常。添加新图像并将其存储在持久性本地文件系统中。

有人知道如何使用 toUrl() 显示图像吗？

...
window.requestFileSystem(window.PERSISTENT, 5*1024*1024, function(fs){
    fs.root.getDirectory(itemId, {create: false}, function(dirEntry) {
        var dirReader = dirEntry.createReader();
        var entries = [];
        var readEntries = function() {
           dirReader.readEntries (function(results) {
            if (!results.length) {
              listResults(entries.sort(), itemId);
            } else {
              entries = entries.concat(fsdatas.dir.toArray(results));
              readEntries();
            }
          }, errorHandler);
        };
        readEntries();
    });
}, errorHandler);
...

和

function listResults(entries, itemId) {
    document.querySelector('#listRecordFiles-'+itemId).innerHTML = '';
    var fragment = document.createDocumentFragment();
    var i = 0;
    entries.forEach(function(entry, i) {
        i++;
        var img = document.createElement('img');
        img.src = entry.toURL();
        fragment.appendChild(img);
    });
    document.querySelector('#listRecordFiles-'+itemId).appendChild(fragment);
}

输出是:

<img src="filesystem:http://domain.tld/persistent/1/image-test.jpg">

但是浏览器上什么也没有显示。

Answer 1

下面的示例是一段代码，负责读取保存在应用程序根目录中的图像，并显示在文档正文中。

请记住，在本例中，我使用 navigator.camera.DestinationType.DATA_URL 打开 PHOTOLIBRARY，并使用 atob 保存图像内容> (ascii to binary), 所以用btoa (binary to ascii) 携带图片

function myLoadFile(filename) {
    var myDocument = document.querySelector("body");
    filesystem.root.getFile(filename, {}, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onload = function(e) {
                var img = document.createElement('img');
                // if you save the file with atob (ascii to binary), then:
                img.src = "data:image/jpeg;base64,"+btoa(this.result);
                // if you don't save the file without atob, then:
                // img.src = "data:image/jpeg;base64,"+this.result;
                myDocument.appendChild(img)
            };

            reader.readAsText(file);
        }, errorHandler);

    }, errorHandler);
}