質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1573閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2019/09/13 14:31

前提・実現したいこと

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

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

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

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

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

ページBのHTML

HTML

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

Javascript

Javascript

1 window.onload = function() { 2 image = document.getElementById ("image"); //グローバル変数にて定義 3 console.log("imageSRC Onload1="+image.src); //・・・・・・・① 4 num = window.localStorage.getItem("num"); //ページAからフォルダ名を受け取る 5 6 console.log("start"+localStorage.getItem(num));//・・・・・・② 7 8 if(localStorage.getItem(num) != null){ 9 image.src = localStorage.getItem(num); 10 console.log("imageSRC Onload="+image.src); //・・・・・・・・③ 11 } 12 } 13

画像の保存の仕方

Javascript

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

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
と出てきて,これは④のコンソール表示と同じです.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

コードの全体が分からないので、推測になりますが、ページ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に入れるのが難しいかも知れません。

投稿2019/09/17 07:55

KNaito

総合スコア376

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/09/17 11:49

ご教授ありがとうございます. やはり,一時的なURLでしたか・・・. アルバムアプリを作成したいので,重い保存方法は避けようと, 画像へのパスを保存したかったのです・・・. 重ねての質問になりますが, 端末の画像へのパスを取得していつでも見れるように出来ないでしょうか??
KNaito

2019/09/18 03:41 編集

なるほど、、。一応ですが `destinationType` として `Camera.DestinationType.NATIVE_URI`を使えば、端末に格納されているアルバム画像へのパスは取得出来ると思います。 ただし、iPhoneのカメラの設定は、デフォルトでフォーマットが高効率(HEIC)になっていて、このHEIC形式の画像は、HTML5アプリからは表示出来ないんですよね、、、。ユーザーが写真を撮るときに、iPhoneのカメラ設定で、フォーマットを互換性優先(JPG)にしてあれば、アプリでimage.srcに設定することは出来ないですが、FileReaderを使って `readAsDataURL` によりBase64形式で読み込んで表示することは出来ます
KNaito

2019/09/18 03:45

例えば、写真を撮るコードを ``` 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プラグインを探すしかないと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問