compress image of publications and chat

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -647,7 +647,18 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
       source: CameraSource.Camera
     });
 
-    const imageBase64 = 'data:image/jpeg;base64,' + file.base64String
+    var imageBase64 = 'data:image/jpeg;base64,' + file.base64String
+
+    const compressedImage = await this.compressImageBase64(
+      imageBase64,
+      800, // maxWidth
+      800, // maxHeight
+      0.9  // quality
+    ).then((picture) => {
+      console.log('Selected: ', picture)
+      imageBase64 = picture
+    });
+
     const blob = this.dataURItoBlob(imageBase64)
 
     console.log(imageBase64)
@@ -699,7 +710,19 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     //const imageData =  await this.fileToBase64Service.convert(file)
     //
 
-    const imageBase64 = 'data:image/jpeg;base64,' + file.base64String
+    var imageBase64 = 'data:image/jpeg;base64,' + file.base64String
+
+    const compressedImage = await this.compressImageBase64(
+      imageBase64,
+      800, // maxWidth
+      800, // maxHeight
+      0.9  // quality
+    ).then((picture) => {
+      console.log('Selected: ', picture)
+      imageBase64 = picture
+    });
+
+
     const response = await fetch(imageBase64);
     const blob = await response.blob();
 
@@ -1183,5 +1206,41 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     return blob;
   
   }
+
+  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);
+      };
+    });
+  }
 }