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

resizingChatPhotos

Browse Source
This commit is contained in:
ivan gomes
2021-11-18 13:01:53 +01:00
parent 4262597360
commit e622acc98e
332 changed files with 6194 additions and 45009 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/chat.module.ts
+2
View File
@@ -29,6 +29,7 @@ import { HeaderPageModule } from 'src/app/shared/header/header.module';
import { NewEventPageModule } from 'src/app/shared/agenda/new-event/new-event.module';
import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/attendee-modal.module';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ImageCropperModule } from 'ngx-image-cropper';
@NgModule({
imports: [
@@ -48,6 +49,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
GroupContactsPageModule,
EmptyChatPageModule,
NewEventPageModule,
ImageCropperModule,
AttendeeModalPageModule,
],
declarations: [
src/app/pages/chat/group-messages/group-messages.module.ts
+5
View File
@@ -13,6 +13,8 @@ import { ChatPopoverPageModule } from 'src/app/shared/popover/chat-popover/chat-
import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ImageCropperModule } from 'ngx-image-cropper';
import { AngularCropperjsModule } from 'angular-cropperjs';
@NgModule({
imports: [
@@ -24,6 +26,9 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
GroupMessagesPageRoutingModule,
ChatPopoverPageModule,
BtnModalDismissPageModule,
ImageCropperModule,
AngularCropperjsModule
],
declarations: [GroupMessagesPage]
})
src/app/pages/chat/group-messages/group-messages.page.html
+5
View File
@@ -67,7 +67,10 @@
<div *ngIf="msg.attachments" class="message-attachments">
<div *ngFor="let file of msg.attachments">
<img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" >
<div>
<div>
<div class="file">
<!-- <canvas id="pdf_canvas"></canvas> -->
@@ -90,7 +93,9 @@
</div>
</div>
</div>
</div>
</div>
{{last ? scrollToBottom() : ''}}
</div>
src/app/pages/chat/group-messages/group-messages.page.ts
+1
View File
@@ -29,6 +29,7 @@ import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.
})
export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
showLoader: boolean;
isGroupCreated:boolean;
src/app/pages/publications/new-publication/new-publication.page.html
+8 -4
View File
@@ -30,7 +30,11 @@
<ion-thumbnail slot="start">
<ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="photo" (click)="openPreview(photo)" ></ion-img>
<ion-row>
<ion-col>
<img src="" #imageElement/>
</ion-col>
</ion-row>
</ion-thumbnail>
<ion-label>
<p>{{capturedImageTitle}}</p>
@@ -58,7 +62,7 @@
</div>
<div class="ion-item-container-no-border">
<ion-label (click)="takePictures()">
<ion-label (click)="takePicture()">
<div class="attach-icon">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>
@@ -70,7 +74,7 @@
</ion-label>
</div>
<div class="ion-item-container-no-border">
<!-- <div class="ion-item-container-no-border">
<ion-label (click)="selectImage()" class="cursor-pointer">
<div class="attach-icon">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>
@@ -80,7 +84,7 @@
<ion-label>Anexar Fotografia</ion-label>
</div>
</ion-label>
</div>
</div> -->
</div>
</div>
src/app/pages/publications/new-publication/new-publication.page.ts
+216 -177
View File
@@ -20,6 +20,8 @@ import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera
import { Filesystem, Directory } from '@capacitor/filesystem';
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
import {Photos} from '../new-publication/photos'
import {Storage} from '@capacitor/storage'
const IMAGE_DIR = 'stored-images';
@@ -37,7 +39,7 @@ export class NewPublicationPage implements OnInit {
images: LocalFile[] = [];
files: Set<File>;
photos: any[] = [];
// date picker
public date: any;
@@ -85,17 +87,19 @@ export class NewPublicationPage implements OnInit {
private fileLoaderService: FileLoaderService,
private fileToBase64Service: FileToBase64Service,
public ThemeService: ThemeService,
private platform: Platform,
private loadingCtrl: LoadingController,
private changeDetectorRef: ChangeDetectorRef
private changeDetectorRef: ChangeDetectorRef,
platform: Platform
) {
this.publicationType = this.navParams.get('publicationType');
this.folderId = this.navParams.get('folderId');
this.publicationTitle = 'Nova Publicação';
this.platform = platform;
}
ngOnInit() {
ngOnInit() {
this.setTitle();
console.log(this.folderId);
Filesystem.mkdir({
@@ -103,55 +107,56 @@ export class NewPublicationPage implements OnInit {
directory: Directory.Data,
recursive: true
});
this.loadPicture()
// await this.loadSaved();
// this.loadPicture()
// this.takePicture();
}
async takePicture() {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri,
source: CameraSource.Camera // Camera, Photos or Prompt!
});
// async takePicture() {
// const image = await Camera.getPhoto({
// quality: 90,
// allowEditing: false,
// resultType: CameraResultType.Uri,
// source: CameraSource.Camera // Camera, Photos or Prompt!
// });
if (image) {
this.saveImage(image)
}
// if (image) {
// this.saveImage(image)
// }
}
// }
convertBlobToBase64s = (blob: Blob) => new Promise((resolve, reject) => {
const reader = new FileReader;
reader.onerror = reject;
reader.onload = () => {
resolve(reader.result);
};
reader.readAsDataURL(blob);
});
// convertBlobToBase64s = (blob: Blob) => new Promise((resolve, reject) => {
// const reader = new FileReader;
// reader.onerror = reject;
// reader.onload = () => {
// resolve(reader.result);
// };
// reader.readAsDataURL(blob);
// });
async laodPicture() {
const capturedImage = await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: CameraSource.Photos,
quality: 90,
width: 1080,
height: 720,
});
// async laodPicture() {
// const capturedImage = await Camera.getPhoto({
// resultType: CameraResultType.Uri,
// source: CameraSource.Photos,
// quality: 90,
// width: 1080,
// height: 720,
// });
const response = await fetch(capturedImage.webPath!);
const blob = await response.blob();
// const response = await fetch(capturedImage.webPath!);
// const blob = await response.blob();
this.photos.unshift({
filepath: "soon...",
webviewPath: capturedImage.webPath
});
// this.photos.unshift({
// filepath: "soon...",
// webviewPath: capturedImage.webPath
// });
this.capturedImage = await this.convertBlobToBase64s(blob);
this.capturedImageTitle = new Date().getTime() + '.jpeg';
}
// this.capturedImage = await this.convertBlobToBase64s(blob);
// this.capturedImageTitle = new Date().getTime() + '.jpeg';
// }
/* laodPicture() {
const input = this.fileLoaderService.createInput({
@@ -419,104 +424,101 @@ private async savePicture(photo: Photo) {
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
} */
// async selectImage() {
// const image = await Camera.getPhoto({
// quality: 90,
// allowEditing: false,
// resultType: CameraResultType.Uri,
// source: CameraSource.Photos // Camera, Photos or Prompt!
// });
// if (image) {
// this.saveImage(image)
// }
// }
// // Create a new file from a capture image
// async saveImage(photo: Photo) {
// const base64Data = await this.readAsBase64(photo);
async selectImage() {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri,
source: CameraSource.Photos // Camera, Photos or Prompt!
});
// const fileName = new Date().getTime() + '.jpeg';
// const savedFile = await Filesystem.writeFile({
// path: `${IMAGE_DIR}/${fileName}`,
// data: base64Data,
// directory: Directory.Data
// });
if (image) {
this.saveImage(image)
}
}
// this.loadFiles();
// }
// Create a new file from a capture image
async saveImage(photo: Photo) {
const base64Data = await this.readAsBase64(photo);
// private async readAsBase64(photo: Photo) {
// if (this.platform.is('hybrid')) {
// const file = await Filesystem.readFile({
// path: photo.path
// });
const fileName = new Date().getTime() + '.jpeg';
const savedFile = await Filesystem.writeFile({
path: `${IMAGE_DIR}/${fileName}`,
data: base64Data,
directory: Directory.Data
});
// return file.data;
// }
// else {
// // Fetch the photo, read as a blob, then convert to base64 format
// const response = await fetch(photo.webPath);
// const blob = await response.blob();
this.loadFiles();
}
// return await this.convertBlobToBase64(blob) as string;
// }
// }
private async readAsBase64(photo: Photo) {
if (this.platform.is('hybrid')) {
const file = await Filesystem.readFile({
path: photo.path
});
// async loadFiles() {
// this.images = [];
return file.data;
}
else {
// Fetch the photo, read as a blob, then convert to base64 format
const response = await fetch(photo.webPath);
const blob = await response.blob();
// const loading = await this.loadingCtrl.create({
// message: 'Loading data...',
// });
// await loading.present();
return await this.convertBlobToBase64(blob) as string;
}
}
// Filesystem.readdir({
// path: IMAGE_DIR,
// directory: Directory.Data,
// }).then(result => {
// console.log('ALL RESULTS', result.files[0])
// let lastphoto = result.files[result.files.length - 1]
// this.loadFileData(lastphoto);
// },
// async (err) => {
// console.log('ERROR FILE DOSENT EXIST', err)
// // Folder does not yet exists!
// await Filesystem.mkdir({
// path: IMAGE_DIR,
// directory: Directory.Data,
// recursive: true
// });
// }
// ).then(_ => {
// loading.dismiss();
// });
// }
async loadFiles() {
this.images = [];
// async loadFileData(fileName: string) {
// console.log('ALL PHOTOT FILE', fileName)
// // for (let f of fileNames) {
// const filePath = `${IMAGE_DIR}/${fileName}`;
const loading = await this.loadingCtrl.create({
message: 'Loading data...',
});
await loading.present();
// const readFile = await Filesystem.readFile({
// path: filePath,
// directory: Directory.Data,
// });
Filesystem.readdir({
path: IMAGE_DIR,
directory: Directory.Data,
}).then(result => {
console.log('ALL RESULTS', result.files[0])
let lastphoto = result.files[result.files.length - 1]
this.loadFileData(lastphoto);
},
async (err) => {
console.log('ERROR FILE DOSENT EXIST', err)
// Folder does not yet exists!
await Filesystem.mkdir({
path: IMAGE_DIR,
directory: Directory.Data,
recursive: true
});
}
).then(_ => {
loading.dismiss();
});
}
// this.images.push({
// name: fileName,
// path: filePath,
// data: `data:image/jpeg;base64,${readFile.data}`,
// });
async loadFileData(fileName: string) {
console.log('ALL PHOTOT FILE', fileName)
// for (let f of fileNames) {
const filePath = `${IMAGE_DIR}/${fileName}`;
// console.log('ALL IMAGE', this.images)
const readFile = await Filesystem.readFile({
path: filePath,
directory: Directory.Data,
});
this.images.push({
name: fileName,
path: filePath,
data: `data:image/jpeg;base64,${readFile.data}`,
});
console.log('ALL IMAGE', this.images)
this.capturedImage = this.images[0].data
//}
}
// this.capturedImage = this.images[0].data
// //}
// }
sliderOpts = {
zoom: false,
@@ -565,7 +567,7 @@ touchStart(card) {
component: PreviewCameraPage,
cssClass: 'transparent-modal',
componentProps: {
image: photo.attachments[0].image_url,
image: photo,
username: photo.u.username,
_updatedAt: photo._updatedAt
}
@@ -573,65 +575,102 @@ touchStart(card) {
modal.present();
}
async takePictures() {
const capturedImage = await Camera.getPhoto({
quality: 90,
// allowEditing: true,
resultType: CameraResultType.Uri,
source: CameraSource.Camera
// async takePictures() {
// const capturedImage = await Camera.getPhoto({
// quality: 90,
// // allowEditing: true,
// resultType: CameraResultType.Uri,
// source: CameraSource.Camera
});
const response = await fetch(capturedImage.webPath!);
const blob = await response.blob();
// });
// const response = await fetch(capturedImage.webPath!);
// const blob = await response.blob();
this.photos.unshift({
filepath: "soon...",
webviewPath: capturedImage.webPath
});
// this.photos.unshift({
// filepath: "soon...",
// webviewPath: capturedImage.webPath
// });
this.capturedImage = await this.convertBlobToBase64(blob);
this.capturedImageTitle = new Date().getTime() + '.jpeg';
// this.capturedImage = await this.convertBlobToBase64(blob);
// this.capturedImageTitle = new Date().getTime() + '.jpeg';
let data = {
image:this.capturedImage,
name: this.capturedImageTitle
}
// let data = {
// image:this.capturedImage,
// name: this.capturedImageTitle
// }
return data;
alert(data)
}
// return data;
// alert(data)
// }
// convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
// const reader = new FileReader;
// reader.onerror = reject;
// reader.onload = () => {
// resolve(reader.result);
// };
// reader.readAsDataURL(blob);
// });
// loadPicture() {
// const input = this.fileLoaderService.createInput({
// accept: ['image/apng', 'image/jpeg', 'image/png']
// })
// input.onchange = async () => {
// const file = this.fileLoaderService.getFirstFile(input)
// console.log(file);
// const imageData = await this.fileToBase64Service.convert(file)
// this.capturedImage = imageData;
// this.capturedImageTitle = file.name;
// let data = {
// image:this.capturedImage,
// name: this.capturedImageTitle
// }
// return data;
// console.log(data)
// };
// }
public photos: Photos[] = [];
private PHOTO_STORAGE: string = "photos";
private platform: Platform;
async takePicture() {
const capturedImage = await Camera.getPhoto({
quality: 90,
// allowEditing: true,
resultType: CameraResultType.Uri,
source: CameraSource.Camera
convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
const reader = new FileReader;
reader.onerror = reject;
reader.onload = () => {
resolve(reader.result);
};
reader.readAsDataURL(blob);
});
const response = await fetch(capturedImage.webPath!);
const blob = await response.blob();
loadPicture() {
const input = this.fileLoaderService.createInput({
accept: ['image/apng', 'image/jpeg', 'image/png']
})
this.photos.unshift({
filepath: "soon...",
webviewPath: capturedImage.webPath
});
input.onchange = async () => {
const file = this.fileLoaderService.getFirstFile(input)
console.log(file);
const imageData = await this.fileToBase64Service.convert(file)
this.capturedImage = imageData;
this.capturedImageTitle = file.name;
let data = {
image:this.capturedImage,
name: this.capturedImageTitle
}
return data;
console.log(data)
};
this.capturedImage = await this.convertBlobToBase64(blob);
this.capturedImageTitle = new Date().getTime() + '.jpeg';
}
}
convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
const reader = new FileReader;
reader.onerror = reject;
reader.onload = () => {
resolve(reader.result);
};
reader.readAsDataURL(blob);
});
loadPicture() {
}}