Publication image adjust

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

@@ -20,8 +20,16 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
 import { NgxImageCompressService } from "ngx-image-compress";
 import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
 import { PublicationFolderService } from 'src/app/store/publication-folder.service';
-
 import { RouteService } from 'src/app/services/route.service';
+import { FileService } from 'src/app/services/functions/file.service';
+import { readAndCompressImage } from 'browser-image-resizer';
+
+const config = {
+  quality: 0.5,
+  maxWidth: 800,
+  maxHeight: 600,
+  debug: true
+};
 const IMAGE_DIR = 'stored-images';
 
 interface LocalFile {
@@ -92,6 +100,7 @@ export class NewPublicationPage implements OnInit {
     private httpErrorHandle: HttpErrorHandle,
     public PublicationFolderService: PublicationFolderService,
     private RouteService: RouteService,
+    public FileService: FileService
   ) {
 
     this.publicationType = this.navParams.get('publicationType');
@@ -114,6 +123,7 @@ export class NewPublicationPage implements OnInit {
     // this.takePicture();
   }
 
+  // in use
   async takePicture() {
 
     const capturedImage = await Camera.getPhoto({
@@ -155,6 +165,7 @@ export class NewPublicationPage implements OnInit {
   });
 
 
+  // in use
   async laodPicture() {
     
     const capturedImage = await Camera.getPhoto({
@@ -349,93 +360,8 @@ export class NewPublicationPage implements OnInit {
     }
   }
 
-  async selectImage() {
-    const image = await Camera.getPhoto({
-      quality: 90,
-      allowEditing: false,
-      resultType: CameraResultType.Uri,
-      source: CameraSource.Camera // Camera, Photos or Prompt!
-    });
-    if (image) {
-      this.saveImage(image)
-    }
-  }
 
 
-
-  // Create a new file from a capture image
-  async saveImage(photo: Photo) {
-    const base64Data = await this.readAsBase64(photo);
-
-    const fileName = new Date().getTime() + '.jpeg';
-    const savedFile = await Filesystem.writeFile({
-      path: `${IMAGE_DIR}/${fileName}`,
-      data: base64Data,
-      directory: Directory.Data
-    });
-
-    //this.loadFiles(fileName);
-    this.loadFileData(fileName);
-  }
-
-  private async readAsBase64(photo: Photo) {
-    if (this.platform.is('hybrid')) {
-      const file = await Filesystem.readFile({
-        path: photo.path
-      });
-
-      return file.data;
-    }
-    else {
-      // Fetch the photo, read as a blob, then convert to base64 format
-      const response = await fetch(photo.webPath);
-      const blob = await response.blob();
-
-      return await this.convertBlobToBase64(blob) as string;
-    }
-  }
-
-  async loadFiles(fileName) {
-    this.images = [];
-
-    const loading = await this.loadingCtrl.create({
-      message: 'Loading data...',
-    });
-    await loading.present();
-
-  }
-
-  async loadFileData(fileName: string) {
-    
-
-    const loading = await this.loadingCtrl.create({
-      message: 'Loading data...',
-    });
-    await loading.present();
-
-    const filePath = `${IMAGE_DIR}/${fileName}`;
-
-    const readFile = await Filesystem.readFile({
-      path: filePath,
-      directory: Directory.Data,
-    });
-
-    this.images.push({
-      name: fileName,
-      path: filePath,
-      data: `data:image/jpeg;base64,${readFile.data}`,
-    });
-
-    
-
-    this.capturedImage = this.images[0].data
-
-    this.compressFile();
-
-    loading.dismiss();
-
-  }
-
   compressFile() {
 
     //this.imgResultBeforeCompress = image;s

src/app/pages/publications/view-publications/publication-detail/publication-detail.page.scss

@@ -50,9 +50,13 @@
     margin: 0 auto;
     border-radius: 0px!important;
     overflow: hidden;
+
+    display: flex;
+    justify-content: center;
+    height: 420px;
+
 }
 .post-img img{
-    width: 100%;
     height: 100%;
     object-fit: cover;
 }

src/app/pages/publications/view-publications/view-publications.page.scss

@@ -128,11 +128,14 @@
       margin: 0 auto;
       border-radius: 0px!important;
       overflow: hidden;
+      background-color: white;
+      display: flex;
+      justify-content: center;
+  
   }
   .post-img img{
-      width: 100%;
       height: 100%;
-      object-fit: cover;
+      max-height: 420px;
   }
   .post-content{
     margin: 0 auto;