peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-20 05:16:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

compress image of publications and chat

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/group-messages/group-messages.page.ts
+61 -2
View File
@@ -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
+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);
};
});
}
}
src/app/pages/publications/new-publication/new-publication.page.ts
+72 -11
View File
@@ -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!);
const blob = await response.blob();
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
});
}
this.convertBlobToBase64Worker.postMessage(blob);
this.convertBlobToBase64Worker.onmessage = async (oEvent)=> {
this.capturedImage = oEvent.data
this.capturedImageTitle = 'foto'
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
+48 -1
View File
@@ -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
+60 -2
View File
@@ -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
+57 -1
View File
@@ -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);
};
});
}
}