10713


こんにちは。

monacaでアプリを作成しています。

画像の描画を早めるため画像をダウンロードしてキャッシュとして利用しようと考えています。

技術サイトで紹介されていた下記のソースを参考にネット上にある画像ファイルを端末のストレージに保存することができました。

iOSでは確認できていないのですが、Androidでは

[code]

    alert('ダウンロード成功 '+filePath);
    
[/code]

で表示されるパスに画像が確かに保存されます。

ローカルに保存された画像のパスはAndroidでは

「file:///storage/emulated/0/test.png」

となっています。

[code]

    function onDeviceReady() {
        requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        rootDir = fileSystem.root.toURL();
        alert('画像のダウンロードを開始するよ');
        var fileTransfer = new FileTransfer();
        //ダウンロードするURL
        var url = encodeURI('https://secure.elephancube.jp/dltestapp/120305.png');
        //保存するパス
        var filePath = rootDir + 'test.png';
        fileTransfer.download(url, filePath, function(entry) {
            alert('ダウンロード成功 '+filePath);
        }, function(error) {
            alert('ダウンロードエラー '+error.code);
        });
        }, function(e) {
            alert('ファイルアクセスエラー');
        });
    }
    
[/code]

しかし、端末にダウンロードした画像を表示するにはどうすればよいのかが分かりません。。

[code]

    <div class="center"><img ng-src="filePath"  height="100%"/></div>
    
[/code]

このような感じで記述すると画像と同じ大きさの枠は表示されるのですが  
画像が壊れているようなアイコン出て中身が表示されません。

パスの部分を直書きしてみたのですが、それでも上手くいきませんでした。

もしかしてそもそもアプリからアクセス出来ないのか、単純に端末のストレージのパスだけでは表示することが出来ないのか、色々と調べてみたのですが解決できず困っています。

どなたかご教授いただけましたら幸いです。

どうぞよろしくお願い致します。

* * *

**追記**

kumapandaさん、ita_3yさん回答ありがとうございます！  
kumapandaさんのコードを参考にさせていただき画像を保存して表示できるようになりました！

しかしダウンロード元を

**「<https://secure.elephancube.jp/dltestapp/120305.png>」**

から

ニフティバックエンドを使った公開URL

**「<https://mb.api.cloud.nifty.com/2013-09-01/applications/hJMH0uH9SKHOV08T/publicFiles/120305.png>」**

へ変更すると何故か画像表示されません。。

image.srcには"data:image/png;base64,PCFET・・"

とファイルは格納されているようです。

表示部分は

document.getElementById('preview_field').appendChild(image);  
reader.readAsDataURL(file);  
document.getElementById('preview_field').innerHTML =  
'file name: ' + file.name';

html部分は

＜div id="preview_field">

と記述しています。

引き続き恐縮ですがアドバイスいただけると幸いです。


CC BY-SA 3.0
2015-05-26T14:32:57.623
10645
2015-06-01T14:36:53.887
2015-06-01T14:36:53.887
8389
8389
question
monaca
端末のローカルストレージに保存した画像を表示する方法


ローカルのファイルを読む時はFile APIを使用するみたいですね。  
[このへん](http://docs.monaca.mobi/cur/ja/reference/phonegap_34/ja/file/)が参考になりそうな気がします。

[code]

    window.resolveLocalFileSystemURL(uri, successCallback, errorCallback);
    
[/code]

参考：[cordova-plugin-file](https://github.com/apache/cordova-plugin-
file/blob/master/www/resolveLocalFileSystemURI.js)


CC BY-SA 3.0
2015-05-26T16:13:35.043
10647
2015-05-26T16:13:35.043
3516
10645
answer


akaneさん、こんにちは。  
ita_3yさんがおっしゃているように、File
APIを使うのが良いのではないかと思います。読み込む際のことを考えると、ファイルの保存場所に、Cordovaのファイルプラグインで定義されている場所を指定したほうが良いと思います。  
まず、ダウンロードですが、FileTransferを使う方法が良くわからなかったので(^^;、ベタに直接ファイルをGETして保存するコードを示します。

[code]

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if( this.readyState == 4 )
        {
            var url = null;
            if( this.status == 200 )
            {
                var errorHandler = function(e){
                    console.debug("ERROR");
                    console.debug(e);    
                };
                var contents = this.response;
                window.resolveLocalFileSystemURL(cordova.file.externalApplicationStorageDirectory, function(dir){
                    dir.getFile("sample.png", {create:true}, function(file){
                        file.createWriter(function(fileWriter){
                            fileWriter.onerror = errorHandler;
                            fileWriter.onwriteend = function(e){
                                if( fileWriter.length === 0 )
                                {
                                    var blob = new Blob([contents], {type: "image/png"});
                                    fileWriter.write(blob);
                                }
                                else
                                {
                                    console.debug("Successfully saved.");
                                }
                            };
                            fileWriter.truncate(0); // 既存ファイルへの追記を防ぐため
                        }, errorHandler);
                    }, errorHandler);
                });
            }
            else
            {
                alert("ERROR");
            }
        }
     };
     xhr.open("GET", "http://xxxxxxx/sample.png", true);
     xhr.responseType = "blob";
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xhr.send();
    
[/code]

ファイルはアプリの作業ディレクトリ（Android/data/com.hoge.fugaなど。Monacaデバッガで実行した場合はAndroid/data/mobi.monaca.debugger.crosswalkなど）に作成されます。なおドキュメントによるとこの場所はAndroid固有なようですので、iOSの場合は別の場所を指定する必要があると思います。

<img>に画像を読み込む場合は、以下のようにします（errorHandlerは適当に用意下さい）。

[code]

    window.resolveLocalFileSystemURL(cordova.file.externalApplicationStorageDirectory, function(dir){
        dir.getFile("sample.png", {}, function(fileEntry){
            fileEntry.file(function(file){
                var reader = new FileReader();
                reader.onerror = errorHandler;
                reader.onloadend = function(e){
                    var image = $("#hoge")[0];
                    image.onload = function(){
                        (window.URL || window.webkitURL).revokeObjectURL(image.src);        
                    };
                    image.src = this.result;
                };
                reader.readAsDataURL(file);
            }, errorHandler);
        }, errorHandler);
    });
    
[/code]

上のコードを書く場合、プロジェクトの「Cordovaプラグインの管理」でファイルプラグインを有効にする必要がありますので注意下さい。


CC BY-SA 3.0
2015-05-28T07:15:29.960
10713
2015-05-28T07:15:29.960
9888
10645
answer