Bugfix - atualizacao da imagem de perfil

Author: ruanlas

src/pages/profile/profile.html

@@ -15,7 +15,8 @@
 
 <ion-content padding>
   <ion-avatar>
-    <img class="circle" [src]="cliente?.imageUrl || 'assets/imgs/avatar-blank.png'">
+    <!-- <img class="circle" [src]="cliente?.imageUrl || 'assets/imgs/avatar-blank.png'"> -->
+    <img class="circle" [src]="profileImage">
   </ion-avatar>
   <h2 text-center>{{cliente?.nome}}</h2>
   <p text-center>{{cliente?.email}}</p>

src/pages/profile/profile.ts

@@ -5,6 +5,8 @@ import { ClienteDTO } from '../../models/cliente.dto';
 import { ClienteService } from '../../services/domain/cliente.service';
 import { API_CONFIG } from '../../config/api.config';
 import { CameraOptions, Camera } from '@ionic-native/camera';
+import { ImageUtilService } from '../../services/image-util.service';
+import { DomSanitizer } from '@angular/platform-browser';
 
 /**
  * Generated class for the ProfilePage page.
@@ -23,13 +25,19 @@ export class ProfilePage {
   cliente: ClienteDTO;
   picture: string;
   cameraOn: boolean = false;
+  // profileImage: string;
+  profileImage;
 
   constructor(
     public navCtrl: NavController, 
     public navParams: NavParams,
     public storage: StorageService,
     public clienteService: ClienteService,
-    public camera: Camera) {
+    public camera: Camera,
+    public imageUtil: ImageUtilService,
+    public sanitizer: DomSanitizer) {
+      
+      this.profileImage = 'assets/imgs/avatar-blank.png';
   }
 
   ionViewDidLoad() {
@@ -62,9 +70,16 @@ export class ProfilePage {
       .subscribe(
         response => {
           this.cliente.imageUrl = `${API_CONFIG.bucketBaseUrl}/cp${this.cliente.id}.jpg`;
+          this.imageUtil.blobToDataURL(response)
+            .then(
+              dataUrl => {
+                let imageUrlTemp : string = dataUrl as string;
+                this.profileImage = this.sanitizer.bypassSecurityTrustUrl(imageUrlTemp);
+              }
+            );
         },
         error => {
-
+          this.profileImage = 'assets/imgs/avatar-blank.png';
         }
       );
   }
@@ -121,7 +136,8 @@ export class ProfilePage {
       .subscribe(
         response => {
           this.picture = null;
-          this.loadData();
+          // this.loadData();
+          this.getImageIfExists();
         },
         error => {
 

src/services/image-util.service.ts

@@ -13,4 +13,16 @@ export class ImageUtilService {
         }
         return new Blob([ab], { type: mimeString });
     }
+
+    // https://gist.github.com/frumbert/3bf7a68ffa2ba59061bdcfc016add9ee
+    blobToDataURL(blob) {
+        return new Promise(
+            (fulfill, reject) => {
+                let reader = new FileReader();
+                reader.onerror = reject;
+                reader.onload = (e) => fulfill(reader.result);
+                reader.readAsDataURL(blob);
+            }
+        );
+    }
 }