Отображение изображения с помощью requestFileSystem и функции toUrl () - PullRequest
Новая
       27

Отображение изображения с помощью requestFileSystem и функции toUrl ()

2 голосов
/ 21 сентября 2011

Я сделал приложение, которое использует 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">

Но в браузере ничего не отображается.

1 Ответ

0 голосов
/ 04 февраля 2016

В приведенном ниже примере приведен фрагмент кода, отвечающий за чтение изображений, сохраненных в корневом каталоге приложения и отображаемых в теле документа.

Помните, в этом случае я использовал navigator.camera.DestinationType. DATA_URL , чтобы открыть ФОТОБИБЛИОТЕКУ и сохранить содержимое изображения, используя atob (ascii to binary), поэтому переносите изображение с btoa (двоичный в 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);
}
...