【Monaca】Javascript でストレージに保存された画像を表示させたい

Question

前提・実現したいこと

完全初心者です．
MonacaでJavascriptを使用してアルバムアプリを作成しています．
複数のフォルダを作成して，フォルダごとに写真を見れるようにしたいです．

理想の動きは，
① ページAでフォルダを選択
② ページBにフォルダ内の写真を表示
です．

現在，とりあえず試しに1枚の画像で試していますが，
アプリ起動時に②の動作がうまくできません．

起動後，ページBで画像を選択した後は，きちんと表示され
ページAに戻ってBを開いてもちゃんと表示出来ています．

起動時にもフォルダ選択後，表示させるにはどうすればいいのでしょうか．

ページBのHTML

<img id="image" src="" style="width:100%;height:auto;" >

Javascript

  window.onload = function() {
    image = document.getElementById ("image"); //グローバル変数にて定義
    console.log("imageSRC Onload1="+image.src);  //・・・・・・・①
    num = window.localStorage.getItem("num"); //ページAからフォルダ名を受け取る

    console.log("start"+localStorage.getItem(num));//・・・・・・②

    if(localStorage.getItem(num) != null){
      image.src = localStorage.getItem(num);
      console.log("imageSRC Onload="+image.src); //・・・・・・・・③
    }
  }

画像の保存の仕方

function setStorage(num,imageURI) {
  localStorage.setItem(num, imageURI);
  console.log("保存したもの=" + localStorage.getItem(num));//・・・・・・④
}

console.logの中身について

気になる点として，imageへのパスがおかしいのではと思い，①〜④でコンソール表示させました．
その結果，
①では，
imageSRC Onload1=file:///var/mobile/Containers/Data/Application/D47CBC23-01BA-42D6-8C9B-553E478969FA/Library/Caches/launch/1568383914/5d6076f5e788859d7462be4d/www/ファイル名.html

その他では
file:///var/mobile/Containers/Data/Application/D47CBC23-01BA-42D6-8C9B-553E478969FA/tmp/cdv_photo_001.jpg?1568382309
と出てきて，これは④のコンソール表示と同じです．

Answer 1

コードの全体が分からないので、推測になりますが、ページBでカメラ機能（アルバム機能）を使って画像を選択したときに割り当てられる一時的なURIをimageURIとして、localStorageに保存しようとしているのではないでしょうか？

一時的なURIは、アプリを終了してしまうと消えてしまうので、カメラを呼び出す時のDestinationTypeを

navigator.camera.getPicture(onSuccess, onFail, { quality: 25,
    destinationType: Camera.DestinationType.DATA_URL
});

のように設定し、Base64化されたDATA_URL形式のデータを扱うようにしてみてはどうでしょうか？　対応するコールバックについては、

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

のように、image.srcに設定するのは data:image/jpeg;base64 というプレフィックスをつけたimageDataにすると良いと思います。localStorageに保存するのも、このimageDataになります。imageURIと違って非常にサイズが大きいので（カメラの性能による）、もしかすると、localStorageに入れるのが難しいかも知れません。

Comments

[退会済みユーザー]

ご教授ありがとうございます．

やはり，一時的なURLでしたか・・・．
アルバムアプリを作成したいので，重い保存方法は避けようと，
画像へのパスを保存したかったのです・・・．

重ねての質問になりますが，
端末の画像へのパスを取得していつでも見れるように出来ないでしょうか？？

[KNaito]

なるほど、、。一応ですが `destinationType` として `Camera.DestinationType.NATIVE_URI`を使えば、端末に格納されているアルバム画像へのパスは取得出来ると思います。

ただし、iPhoneのカメラの設定は、デフォルトでフォーマットが高効率（HEIC）になっていて、このHEIC形式の画像は、HTML5アプリからは表示出来ないんですよね、、、。ユーザーが写真を撮るときに、iPhoneのカメラ設定で、フォーマットを互換性優先(JPG)にしてあれば、アプリでimage.srcに設定することは出来ないですが、FileReaderを使って `readAsDataURL` によりBase64形式で読み込んで表示することは出来ます

[KNaito]

例えば、写真を撮るコードを
```
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM });
```
として、成功時の処理は
```
function onSuccess(imageURI) {
resolveLocalFileSystemURL(imageURI, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(event) {
var image = document.getElementById('myImage');
image.src = event.target.result;
};
console.log('Reading file: ' + file.name);
reader.readAsDataURL(file);
});
});
}
```
のようになります。この時のimageURIは、永続的に使えると思うのですが、しかし、先ほど書いたように、これはiPhoneのカメラ設定で互換性優先 (この場合、JPGで保存される）としないと、結局、アプリからの表示が出来ません。iPhoneのカメラ設定のデフォルトは、高効率（この場合、HEICという形式で保存される）となってしまい、FileReaderで読みだしても、HTML5から表示出来ないのです。

なんとかして、HEIC画像をJPG画像に変換する処理を入れるか、あるいは、NATIVE_URIのURIパス(例えば、`assets-library://asset/asset.HEIC?id=843C6216-C143-4F94-A0CF-2E91E4D395BB&ext=HEIC` みたいなURI）、それを表示するcordovaプラグインを探すしかないと思います。