PhoneGapでダウンロードしたファイルを表示する

http://d.hatena.ne.jp/t-horikiri/20121102/1351846142

前回はファイルをダウンロードしてみました。画像や動画の場合はファイルを保存するだけではなくて、実際に参照したいですよね。
今回はダウンロードした画像ファイルなどを表示させてみようと思います。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="js/cordova-2.0.0.js"></script>
    <script src="js/jquery-1.8.1.js" ></script>
    <script src="js/sample.js"></script>
  </head>
  <body>
    <img src="" id="image" />
  </body>
</html>

function viewImage() {
    var filePath = 'file://' + rootDir + '/filename.png';
    $('#image').attr('src', filePath).on('error', function() {
        $(this).attr('src', 'noimage.png');
    });
}

簡単ですね。rootDirは前回説明した通りです。しかし、imgタグのsrc属性に値を入れる場合には、「file://」とプロトコルを指定しないとダメなようです。
画像だけでなく、動画も表示することが可能です。その場合は、imgタグではなくて、videoタグを使えば良いです。
別の方法として、FileReaderでファイルを読み込んで、readAsDataURLでBase64変換してimgタグのsrc属性に設定する方法もあります。

function viewImage2() {
    var filePath = 'file://' + rootDir + '/filename.png',
        reader = new FileReader();
    resolveLocalFileSystemURI(filePath, function(fileEntry) {
        fileEntry.file(function(f) {
            reader.onloadend = function(event) {
            	// 読み込んだ結果をimgタグのsrc属性に設定する
                $('#image').attr('src', event.target.result);
            };
            reader.readAsDataURL(f);
        }, function(e) {
            navigator.notification.alert('エラーですよ。');
        });
    }, function(e) {
        navigator.notification.alert('エラーですよ。');
    });
}