compress image of publications and chat

src/app/shared/publication/new-publication/new-publication.page.ts

@@ -84,7 +84,16 @@ export class NewPublicationPage implements OnInit {
 
       this.capturedImage = 'data:image/jpeg;base64,' +capturedImage.base64String;
       this.capturedImageTitle = 'foto';
-      //
+      
+      const compressedImage = await this.compressImageBase64(
+        this.capturedImage,
+        800, // maxWidth
+        800, // maxHeight
+        0.9  // quality
+      ).then((picture) => {
+        console.log('taked: ', picture)
+        this.capturedImage = picture
+      });
     }
 
     async laodPicture() {
@@ -96,6 +105,17 @@ export class NewPublicationPage implements OnInit {
 
       this.capturedImage = 'data:image/jpeg;base64,' +capturedImage.base64String;
       this.capturedImageTitle = 'foto';
+
+      const compressedImage = await this.compressImageBase64(
+        this.capturedImage,
+        800, // maxWidth
+        800, // maxHeight
+        0.9  // quality
+      ).then((picture) => {
+        console.log('Selected: ', picture)
+        this.capturedImage = picture
+      });
+
     }
 
 
@@ -273,4 +293,40 @@ export class NewPublicationPage implements OnInit {
 
   }
 
+  async compressImageBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const image = new (window as any).Image();
+      image.src = base64String;
+  
+      image.onload = async () => {
+        const canvas = document.createElement('canvas');
+        let newWidth = image.width;
+        let newHeight = image.height;
+  
+        if (newWidth > maxWidth) {
+          newHeight *= maxWidth / newWidth;
+          newWidth = maxWidth;
+        }
+  
+        if (newHeight > maxHeight) {
+          newWidth *= maxHeight / newHeight;
+          newHeight = maxHeight;
+        }
+  
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+  
+        const context = canvas.getContext('2d');
+        context?.drawImage(image, 0, 0, newWidth, newHeight);
+  
+        const compressedBase64 = canvas.toDataURL('image/jpeg', quality);
+        resolve(compressedBase64);
+      };
+  
+      image.onerror = (error) => {
+        reject(error);
+      };
+    });
+  }
+
 }