previewImages

src/app/pages/publications/new-publication/new-publication.page.html

@@ -29,7 +29,7 @@
         <ion-item lines="none">
           <ion-thumbnail slot="start">
           
-              <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="photo" ></ion-img>
+              <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="photo" (click)="openPreview(photo)" ></ion-img>
            
           </ion-thumbnail>
           <ion-label>
@@ -58,7 +58,7 @@
       </div>
 
       <div class="ion-item-container-no-border">
-        <ion-label (click)="takePicture()">
+        <ion-label (click)="takePictures()">
           <div class="attach-icon">
             <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
             <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>
@@ -79,7 +79,7 @@
           <div class="attach-document cursor-pointer">
             <ion-label>Anexar Fotografia</ion-label>
           </div>
-        <!-- </ion-label> -->
+      </ion-label> 
       </div>
     </div>
 

src/app/pages/publications/new-publication/new-publication.page.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { ModalController, NavParams, Platform, LoadingController } from '@ionic/angular';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ModalController, NavParams, Platform, LoadingController, IonSlides } from '@ionic/angular';
 
 /* import {Plugins, CameraResultType, CameraSource} from '@capacitor/core'; */
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@@ -19,6 +19,7 @@ import { ThemeService } from 'src/app/services/theme.service';
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 
 import { Filesystem, Directory } from '@capacitor/filesystem';
+import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
 
 const IMAGE_DIR = 'stored-images';
 
@@ -35,6 +36,9 @@ interface LocalFile {
 export class NewPublicationPage implements OnInit {
   images: LocalFile[] = [];
 
+  files: Set<File>;
+  photos: any[] = [];
+
   // date picker
   public date: any;
   public disabled = false;
@@ -70,7 +74,7 @@ export class NewPublicationPage implements OnInit {
 
   capturedImage: any = '';
   capturedImageTitle: any;
-  public photos: any[] = [];
+  // public photos: any[] = [];
 
   constructor(
     private modalController: ModalController,
@@ -83,6 +87,7 @@ export class NewPublicationPage implements OnInit {
     public ThemeService: ThemeService,
     private platform: Platform,
     private loadingCtrl: LoadingController,
+    private changeDetectorRef: ChangeDetectorRef
   ) {
 
     this.publicationType = this.navParams.get('publicationType');
@@ -98,6 +103,7 @@ export class NewPublicationPage implements OnInit {
       directory: Directory.Data,
       recursive: true
     });
+    this.loadPicture() 
 
     // this.takePicture();
   }
@@ -116,7 +122,7 @@ export class NewPublicationPage implements OnInit {
 
   }
 
-  convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
+  convertBlobToBase64s = (blob: Blob) => new Promise((resolve, reject) => {
     const reader = new FileReader;
     reader.onerror = reject;
     reader.onload = () => {
@@ -143,7 +149,7 @@ export class NewPublicationPage implements OnInit {
       webviewPath: capturedImage.webPath
     });
 
-    this.capturedImage = await this.convertBlobToBase64(blob);
+    this.capturedImage = await this.convertBlobToBase64s(blob);
     this.capturedImageTitle = new Date().getTime() + '.jpeg';
   }
 
@@ -388,18 +394,18 @@ private async savePicture(photo: Photo) {
       console.log(this.pub, 'pub')
     }
   }
+//  async openGallery() {
+//     const modal = await this.modalController.create({
+//       component: GalleryPage,
+//       componentProps:{
+//       },
+//       cssClass: 'new-publication',
+//       backdropDismiss: false
+//     });
+//     await modal.present();
+//     modal.onDidDismiss();
+//    } 
 
-  /* async openGallery() {
-    const modal = await this.modalController.create({
-      component: GalleryPage,
-      componentProps:{
-      },
-      cssClass: 'new-publication',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
-  } */
 
   /* async takePicture(){
    const image = await Plugins.Camera.getPhoto({
@@ -511,4 +517,121 @@ private async savePicture(photo: Photo) {
     this.capturedImage = this.images[0].data
     //}
   }
+
+  sliderOpts = {
+    zoom: false,
+    slidesPerView: 1.5,
+    spaceBetween: 20,
+    centeredSlides: true
+  };
+  zoomActive = false;
+zoomScale = 1;
+ 
+sliderZoomOpts = {
+  allowSlidePrev: false,
+  allowSlideNext: false,
+  zoom: {
+    maxRatio: 5
+  },
+  on: {
+    zoomChange: (scale, imageEl, slideEl) => {        
+      this.zoomActive = true;
+      this.zoomScale = scale/5;
+      this.changeDetectorRef.detectChanges();         
+    }
+  }
+}
+ 
+async touchEnd(zoomslides: IonSlides, card) {
+  // Zoom back to normal
+  const slider = await zoomslides.getSwiper();
+  const zoom = slider.zoom;
+  zoom.out();
+ 
+  // Card back to normal
+  card.el.style['z-index'] = 9;
+ 
+  this.zoomActive = false;
+  this.changeDetectorRef.detectChanges();
+}
+ 
+touchStart(card) {
+  // Make card appear above backdrop
+  card.el.style['z-index'] = 11;
+}
+
+  async openPreview(photo) {
+    const modal = await this.modalController.create({
+      component:  PreviewCameraPage,
+      cssClass: 'transparent-modal',
+      componentProps: {
+        image: photo.attachments[0].image_url,
+        username: photo.u.username,
+        _updatedAt: photo._updatedAt
+      }
+    });
+    modal.present();
+  }
+
+  async takePictures() {
+    const capturedImage = await Camera.getPhoto({
+      quality: 90,
+      // allowEditing: true,
+      resultType: CameraResultType.Uri,
+      source: CameraSource.Camera
+
+    });
+    const response = await fetch(capturedImage.webPath!);
+    const blob = await response.blob();
+
+      this.photos.unshift({
+        filepath: "soon...",
+        webviewPath: capturedImage.webPath
+      });
+
+      this.capturedImage = await this.convertBlobToBase64(blob);
+      this.capturedImageTitle = new Date().getTime() + '.jpeg';
+
+    let data = {
+      image:this.capturedImage,
+      name: this.capturedImageTitle
+    }
+
+    return data;
+    alert(data)
+  }
+
+  convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
+    const reader = new FileReader;
+    reader.onerror = reject;
+    reader.onload = () => {
+        resolve(reader.result);
+    };
+    reader.readAsDataURL(blob);
+  });
+
+  loadPicture() {
+    const input = this.fileLoaderService.createInput({
+      accept: ['image/apng', 'image/jpeg', 'image/png']
+    })
+
+    input.onchange = async () => {
+      const file = this.fileLoaderService.getFirstFile(input)
+
+      console.log(file);
+
+      const imageData =  await this.fileToBase64Service.convert(file)
+      this.capturedImage = imageData;
+      this.capturedImageTitle = file.name;
+
+      let data = {
+        image:this.capturedImage,
+        name: this.capturedImageTitle
+      }
+
+      return data;
+
+      console.log(data)
+    };
+  }
 }