compress image of publications and chat

This commit is contained in:
Eudes Inácio
2023-08-28 16:36:31 +01:00
parent fe6614a37e
commit 8525fcb8f6
7 changed files with 368 additions and 28 deletions
@@ -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);
};
});
}
}
+64 -5
View File
@@ -630,10 +630,21 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
source: CameraSource.Camera
});
const imageBase64 = 'data:image/jpeg;base64,' + file.base64String
const blob = this.dataURItoBlob(imageBase64)
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
});
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
const response = await fetch(imageBase64);
const blob = await response.blob();
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
});
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);
};
});
}
}