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);
+      };
+    });
+  }
 }
 

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

@@ -630,10 +630,21 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       source: CameraSource.Camera
     });
 
-    const imageBase64 = 'data:image/jpeg;base64,' + file.base64String
+    var imageBase64 = 'data:image/jpeg;base64,' + file.base64String
-    const blob = this.dataURItoBlob(imageBase64)
+    
+
+    const compressedImage = await this.compressImageBase64(
+      imageBase64,
+      800, // maxWidth
+      800, // maxHeight
+      0.9  // quality
+    ).then((picture) => {
+      console.log('Selected: ', picture)
+      imageBase64 = picture
+    });
 
     console.log(imageBase64)
+    const blob = this.dataURItoBlob(imageBase64)
 
     const formData = new FormData();
     formData.append("blobFile", blob);
@@ -748,12 +759,24 @@ export class MessagesPage 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 response = await fetch(imageBase64);
+    
-    const blob = await response.blob();
+
+    const compressedImage = await this.compressImageBase64(
+      imageBase64,
+      800, // maxWidth
+      800, // maxHeight
+      0.9  // quality
+    ).then((picture) => {
+      console.log('Selected: ', picture)
+      imageBase64 = picture
+    });
 
     console.log(imageBase64)
 
+    const response = await fetch(imageBase64);
+    const blob = await response.blob();
+
     const formData = new FormData();
     formData.append("blobFile", blob);
 
@@ -1146,6 +1169,42 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  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);
+      };
+    });
+  }
+
 }
 
 

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

@@ -125,24 +125,48 @@ export class NewPublicationPage implements OnInit {
 
   // in use
   async takePicture() {
-
     const capturedImage = await Camera.getPhoto({
       quality: 50,
       // allowEditing: true,
-      resultType: CameraResultType.Uri,
+      resultType: CameraResultType.Base64,
       source: CameraSource.Camera
     });
 
-    const response = await fetch(capturedImage.webPath!);
+      this.capturedImage = 'data:image/jpeg;base64,' +capturedImage.base64String;
-    const blob = await response.blob();
+      this.capturedImageTitle = 'foto';
       
-    this.convertBlobToBase64Worker.postMessage(blob);
+      const compressedImage = await this.compressImageBase64(
-    this.convertBlobToBase64Worker.onmessage = async (oEvent)=> {
+        this.capturedImage,
-      this.capturedImage = oEvent.data
+        800, // maxWidth
-      this.capturedImageTitle = 'foto'
+        800, // maxHeight
+        0.9  // quality
+      ).then((picture) => {
+        console.log('taked: ', picture)
+        this.capturedImage = picture
+      });
+    }
+
+    async laodPicture() {
+      const capturedImage = await Camera.getPhoto({
+        quality: 90,
+        resultType: CameraResultType.Base64,
+        source: CameraSource.Photos
+      });
+
+      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
+      });
 
     }
-  }
 
   imageSize(image) {
     var canvas = document.createElement('canvas');
@@ -165,7 +189,7 @@ export class NewPublicationPage implements OnInit {
   });
 
 
-  // in use
+/*   // in use
   async laodPicture() {
     
     const capturedImage = await Camera.getPhoto({
@@ -185,7 +209,7 @@ export class NewPublicationPage implements OnInit {
 
     }
 
-  }
+  } */
 
 
 
@@ -374,4 +398,41 @@ export class NewPublicationPage implements OnInit {
   deletePublicationImage() {
     this.publication.FileBase64 = ""
   }
+
+  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);
+      };
+    });
+  }
+  
 }

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

@@ -718,8 +718,18 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     
     //const imageData =  await this.fileToBase64Service.convert(file)
     //
+    var base64  = 'data:image/jpeg;base64,' + file.base64String
+    const compressedImage = await this.compressImageBase64(
+      base64,
+      800, // maxWidth
+      800, // maxHeight
+      0.9  // quality
+    ).then((picture) => {
+      console.log('Selected: ', picture)
+      base64 = picture
+    });
 
-    const response = await fetch('data:image/jpeg;base64,' + file.base64String!);
+    const response = await fetch(base64);
     const blob = await response.blob();
 
     const formData = new FormData();
@@ -1123,5 +1133,42 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     } else { }
   }
 
+
+  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);
+      };
+    });
+  }
+
 }
 

src/app/shared/chat/messages/messages.page.ts

@@ -645,7 +645,18 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       source: CameraSource.Camera
     });
 
-    const base64  = 'data:image/jpeg;base64,' + file.base64String
+    var base64  = 'data:image/jpeg;base64,' + file.base64String
+    const compressedImage = await this.compressImageBase64(
+      base64,
+      800, // maxWidth
+      800, // maxHeight
+      0.9  // quality
+    ).then((picture) => {
+      console.log('Selected: ', picture)
+      base64 = picture
+    });
+
+
     const blob = this.dataURItoBlob(base64)
 
     const formData = new FormData();
@@ -770,8 +781,18 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     //const imageData =  await this.fileToBase64Service.convert(file)
     //
 
+    var base64  = 'data:image/jpeg;base64,' + file.base64String
+    const compressedImage = await this.compressImageBase64(
+      base64,
+      800, // maxWidth
+      800, // maxHeight
+      0.9  // quality
+    ).then((picture) => {
+      console.log('Selected: ', picture)
+      base64 = picture
+    });
     
-    const response = await fetch('data:image/jpeg;base64,' + file.base64String!);
+    const response = await fetch(base64);
     const blob = await response.blob();
 
     const formData = new FormData();
@@ -1153,6 +1174,43 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
 
+  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);
+      };
+    });
+  }
+
+
 }
 
 

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);
+      };
+    });
+  }
+
 }

version/git-version.ts

@@ -1,12 +1,12 @@
 export let versionData = {
-  "shortSHA": "9e9601603",
+  "shortSHA": "fe6614a37",
-  "SHA": "9e960160381e0ff9579e599b896ddeb0794cf3de",
+  "SHA": "fe6614a37e7a183df5a93894ced3f8adefc12bbe",
   "branch": "developer-prod",
   "lastCommitAuthor": "'Eudes Inácio'",
-  "lastCommitTime": "'Mon Aug 28 11:29:21 2023 +0100'",
+  "lastCommitTime": "'Mon Aug 28 11:32:19 2023 +0100'",
-  "lastCommitMessage": "pull made 28/08/2023 11:29",
+  "lastCommitMessage": "merge with developer-prod-2",
-  "lastCommitNumber": "5215",
+  "lastCommitNumber": "5219",
   "change": "",
-  "changeStatus": "On branch developer-prod\nYour branch is ahead of 'origin/developer-prod' by 8 commits.\n  (use \"git push\" to publish your local commits)\n\nAll conflicts fixed but you are still merging.\n  (use \"git commit\" to conclude merge)\n\nChanges to be committed:\n\tmodified:   src/app/modals/create-process/create-process.page.html\n\tmodified:   src/app/modals/document-detail/document-detail.page.html\n\tmodified:   src/app/modals/document-set-up-meeting/document-set-up-meeting.page.html\n\tmodified:   src/app/modals/forward/forward.page.html\n\tmodified:   src/app/modals/profile/edit-profile/edit-profile.page.html\n\tmodified:   src/app/modals/view-event/view-event.page.html\n\tmodified:   src/app/pages/agenda/edit-event/edit-event.page.html\n\tmodified:   src/app/pages/agenda/new-event/new-event.page.html\n\tmodified:   src/app/pages/agenda/view-event/view-event.page.html\n\tmodified:   src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.html\n\tmodified:   src/app/pages/gabinete-digital/despachos/despacho/despacho.page.html\n\tmodified:   src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.html\n\tmodified:   src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html\n\tmodified:   src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html\n\tmodified:   src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html\n\tmodified:   src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html\n\tmodified:   src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html\n\tmodified:   src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.html\n\tmodified:   src/app/pages/publications/new-publication/new-publication.page.ts\n\tmodified:   src/app/pages/publications/publications.page.html\n\tmodified:   src/app/pages/publications/publications.page.ts\n\tmodified:   src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts\n\tmodified:   src/app/pages/publications/view-publications/view-publications.page.html\n\tmodified:   src/app/pages/publications/view-publications/view-publications.page.ts\n\tmodified:   src/app/pipes/publication.pipe.ts\n\tmodified:   src/app/shared/agenda/approve-event/approve-event.page.html\n\tmodified:   src/app/shared/agenda/edit-event-to-approve/edit-event-to-approve.page.html\n\tmodified:   src/app/shared/agenda/edit-event/edit-event.page.html\n\tmodified:   src/app/shared/agenda/new-event/new-event.page.html\n\tmodified:   src/app/shared/agenda/view-event/view-event.page.html\n\tmodified:   src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html\n\tmodified:   src/app/shared/gabinete-digital/generic/task-detail-content/task-detail-content.page.html\n\tmodified:   src/app/shared/gabinete-digital/generic/task-details/task-details.page.html\n\tmodified:   src/app/shared/header/header.page.html\n\tmodified:   src/app/shared/header/header.page.scss\n\tmodified:   src/app/shared/publication/new-publication/new-publication.page.ts\n\tmodified:   src/app/shared/publication/view-publications/publication-detail/publication-detail.page.ts\n\tmodified:   src/app/shared/publication/view-publications/view-publications.page.html\n\tmodified:   src/app/shared/publication/view-publications/view-publications.page.ts\n\tmodified:   src/app/store/publication-folder.service.ts\n\tnew file:   src/assets/images/camera.png",
+  "changeStatus": "On branch developer-prod\nYour branch is ahead of 'origin/developer-prod' by 12 commits.\n  (use \"git push\" to publish your local commits)\n\nChanges to be committed:\n  (use \"git restore --staged <file>...\" to unstage)\n\tmodified:   src/app/pages/chat/group-messages/group-messages.page.ts\n\tmodified:   src/app/pages/chat/messages/messages.page.ts\n\tmodified:   src/app/pages/publications/new-publication/new-publication.page.ts\n\tmodified:   src/app/shared/chat/group-messages/group-messages.page.ts\n\tmodified:   src/app/shared/chat/messages/messages.page.ts\n\tmodified:   src/app/shared/publication/new-publication/new-publication.page.ts",
   "changeAuthor": "eudes.inacio"
 }