开发者

Display image with requestFileSystem and toUrl() function

开发者 https://www.devze.com 2023-04-06 05:59 出处:网络
I made an application who use requestFileSystem. Everything works fine. Add a new image and store it in an persistent local file system.

I made an application who use requestFileSystem. Everything works fine. Add a new image and store it in an persistent local file system.

Does anybody know how to display an image with 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);
...

And

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);
}

The output is :

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

But nothing is displayed on browser.


The example below is a snippet of code responsible for reading the images saved in the application's root directory, and show in the document body.

Remember, in this case, I used navigator.camera.DestinationType.DATA_URL to open the PHOTOLIBRARY, and saved the image content using atob (ascii to binary), so carry the image with 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);
}
0

精彩评论

暂无评论...
验证码 换一张
取 消