前提・実現したいこと
Ionic4 cordova を使用して、iOSまたはAndroid OSのスマートフォンに保存された画像を選択して表示、かつ次回以降は同じ画面を開いた際に、選択された画像がそのまま表示されているような処理を作成しています。プラグインは、cordova-plugin-cameraを使用しています。選択された画像がそのまま表示される処理については、cordova-sqlite-storageによって選択された画像のパスを保存・取得する予定です(下記ソースコードは、画像の選択部分のみとなっています)。
発生している問題・エラーメッセージ
Android OSについては、画像選択時に毎回同じパスを取得できており、問題ないです。
iOSにて画像を選択する際、アプリのtmpディレクトリに保存され、アプリ再起動時に削除されてしまっているようで、画像のパスが毎回変化してしまいます。この仕様により、前回選択された画像を再び表示させるという処理ができなくなっています。
もし、該当のプラグイン以外で実現できる方法があれば、ご教授をお願い致します。
該当のソースコード
typescript
1import { Component } from '@angular/core'; 2import { NavController, Platform } from 'ionic-angular'; 3import { Camera } from '@ionic-native/camera'; 4import { FilePath } from '@ionic-native/file-path'; 5import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; 6 7declare var Ionic: any; 8 9@Component({ 10 selector: 'page-home', 11 templateUrl: 'home.html' 12}) 13export class HomePage { 14 15 safeUrl: SafeResourceUrl = null; 16 constructor(public platform: Platform, public navCtrl: NavController, public camera: Camera, public filePath: FilePath, private domSanitizer: DomSanitizer) { 17 18 } 19 20 // フォトライブラリ 21 openPhoto() { 22 const options = { 23 quality: 100, 24 sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, 25 destinationType: this.camera.DestinationType.FILE_URI, 26 mediaType: this.camera.MediaType.PICTURE 27 } 28 this.camera.getPicture(options).then((url) => { 29 if (this.platform.is('ios')) { 30 // iOS 31 let imageUrl = Ionic.WebView.convertFileSrc(url); 32 this.safeUrl = this.domSanitizer.bypassSecurityTrustUrl(imageUrl); 33 } else if (this.platform.is('android')) { 34 // Android OS 35 this.filePath.resolveNativePath(url) 36 .then(filePath => { 37 let imageUrl = Ionic.WebView.convertFileSrc(filePath) 38 this.safeUrl = imageUrl; 39 }) 40 } 41 }) 42 } 43 44} 45
html
1<ion-header> 2 <ion-navbar> 3 <button ion-button menuToggle> 4 <ion-icon name="menu"></ion-icon> 5 </button> 6 <ion-title>Home</ion-title> 7 </ion-navbar> 8</ion-header> 9 10<ion-content padding> 11 <h3>Ionic Menu Starter</h3> 12 13 <p> 14 If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way. 15 </p> 16 17 <button ion-button secondary (click)="openPhoto()">Toggle Menu</button> 18 <img [src]="safeUrl" style="width: 50%; height: 50%"> 19</ion-content>
試したこと
上記ソースコードを、iOS11.3, 12.1およびAndroid8.0, 9.0のエミュレータ上で実行しました。
補足情報(FW/ツールのバージョンなど)
$ ionic info Ionic: ionic (Ionic CLI) : 4.5.0 Ionic Framework : ionic-angular 3.9.9 @ionic/app-scripts : 3.2.4 Cordova: cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.1.4, ios 5.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins) System: ios-deploy : 1.9.4 ios-sim : 8.0.2 NodeJS : v8.11.4 npm : 6.5.0 OS : macOS Xcode : Xcode 11.3 Build version 11C29
回答1件
あなたの回答
tips
プレビュー