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を使用しました。 （ASCIIバイナリ）フォトライブラリを開き、（バイナリにASCII）ATOB を用いて画像コンテンツを保存し、そう btoa で画像を運ぶDATA_URL

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