前提・実現したいこと
ionic4でカメラロールから取得した画像をローカルに保存し、画面にも表示できるようにしたい。
発生している問題・エラーメッセージ
ローカルに保存まではできるようになったが、画面に表示が上手くいかないです。
Base64に変換していないからなのでは?と思い、Ionic Native pluginsの「Base64」をインポートし、
下記のように変換できるか試してみたが、そもそもアプリが起動時(ios)にエラーとなり、
上手くいかず・・・
this.base64.encodeFile(filePath).then((base64File: string) => { console.log(base64File); }, (err) => { console.log(err); });
他の方法でBase64の変換ができるような方法が知りたいです。
また、そもそもBase64は関係ない場合はご指摘いただきたいです。
該当のソースコード
ionic
1 2<ion-header> 3 <ion-toolbar> 4 <ion-title> 5 Title 6 </ion-title> 7 </ion-toolbar> 8</ion-header> 9 10<ion-content> 11 <img [src]="image"> 12 <ion-button (click)="takePhoto()">take photo</ion-button> 13</ion-content> 14
ionic
1 2takePhoto() { 3 4 // 〜省略〜 // 5 6 const { Camera, Filesystem } = Plugins; 7 8 let options = { 9 resultType: CameraResultType.Uri, 10 source: CameraSource.Photos 11 }; 12 13 // ①カメラロールから画像を取得 14 const img = await Camera.getPhoto(options); 15 16 let contents = await Plugins.Filesystem.readFile({ 17 path: img.path 18 }); 19 20 // ②ローカルに書き込み 21 Plugins.Filesystem.writeFile({ 22 data: contents.data, 23 path: "aaa.jpeg", 24 directory: FilesystemDirectory.Data 25 }); 26 27 // ③ローカルに書いた画像のUri取得 28 let imageuri = await Filesystem.getUri({ 29 directory: FilesystemDirectory.Data, 30 path: "aaa.jpeg" 31 }); 32 33 this.image = imageuri.uri; 34} 35
補足情報(FW/ツールのバージョンなど)
Ionic + Capacitor
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。