From 92631cb4ee758dbc05c28a8a78d955ec3477519f Mon Sep 17 00:00:00 2001 From: Equilibrium ITO Date: Tue, 26 Mar 2024 14:25:39 +0100 Subject: [PATCH 1/4] cropp componet created --- .../crop-image/crop-image-routing.module.ts | 17 +++++++ .../modals/crop-image/crop-image.module.ts | 22 +++++++++ .../modals/crop-image/crop-image.page.html | 22 +++++++++ .../modals/crop-image/crop-image.page.scss | 0 .../modals/crop-image/crop-image.page.spec.ts | 24 ++++++++++ src/app/modals/crop-image/crop-image.page.ts | 46 +++++++++++++++++++ 6 files changed, 131 insertions(+) create mode 100644 src/app/modals/crop-image/crop-image-routing.module.ts create mode 100644 src/app/modals/crop-image/crop-image.module.ts create mode 100644 src/app/modals/crop-image/crop-image.page.html create mode 100644 src/app/modals/crop-image/crop-image.page.scss create mode 100644 src/app/modals/crop-image/crop-image.page.spec.ts create mode 100644 src/app/modals/crop-image/crop-image.page.ts diff --git a/src/app/modals/crop-image/crop-image-routing.module.ts b/src/app/modals/crop-image/crop-image-routing.module.ts new file mode 100644 index 000000000..44fc8145d --- /dev/null +++ b/src/app/modals/crop-image/crop-image-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { CropImagePage } from './crop-image.page'; + +const routes: Routes = [ + { + path: '', + component: CropImagePage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class CropImagePageRoutingModule {} diff --git a/src/app/modals/crop-image/crop-image.module.ts b/src/app/modals/crop-image/crop-image.module.ts new file mode 100644 index 000000000..bc7549919 --- /dev/null +++ b/src/app/modals/crop-image/crop-image.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { CropImagePageRoutingModule } from './crop-image-routing.module'; + +import { CropImagePage } from './crop-image.page'; +import { ImageCropperModule } from 'ngx-image-cropper'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + CropImagePageRoutingModule, + ImageCropperModule + ], + declarations: [CropImagePage] +}) +export class CropImagePageModule {} diff --git a/src/app/modals/crop-image/crop-image.page.html b/src/app/modals/crop-image/crop-image.page.html new file mode 100644 index 000000000..1475b18c6 --- /dev/null +++ b/src/app/modals/crop-image/crop-image.page.html @@ -0,0 +1,22 @@ + + + cropImage + + + + + + + + diff --git a/src/app/modals/crop-image/crop-image.page.scss b/src/app/modals/crop-image/crop-image.page.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/modals/crop-image/crop-image.page.spec.ts b/src/app/modals/crop-image/crop-image.page.spec.ts new file mode 100644 index 000000000..e1ad274d2 --- /dev/null +++ b/src/app/modals/crop-image/crop-image.page.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { CropImagePage } from './crop-image.page'; + +describe('CropImagePage', () => { + let component: CropImagePage; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ CropImagePage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(CropImagePage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modals/crop-image/crop-image.page.ts b/src/app/modals/crop-image/crop-image.page.ts new file mode 100644 index 000000000..d9b290049 --- /dev/null +++ b/src/app/modals/crop-image/crop-image.page.ts @@ -0,0 +1,46 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper'; + +@Component({ + selector: 'app-crop-image', + templateUrl: './crop-image.page.html', + styleUrls: ['./crop-image.page.scss'], +}) +export class CropImagePage implements OnInit { + + imageChangedEvent: any = ''; + croppedImage: any = ''; + @ViewChild('cropper') cropper: ImageCropperComponent; + capturedImage: any = ""; + + constructor() { } + + ngOnInit() { + } + + fileChangeEvent(event: any): void { + this.imageChangedEvent = event; + } + imageCropped(event: ImageCroppedEvent) { + this.croppedImage = event.base64; + + console.log('Croped image',event) + console.log('Croped image 22',this.croppedImage) + // event.blob can be used to upload the cropped image + } +/* cropperReady() { + if(this.croppedImage != '') + var fileObject = { + FileBase64: this.croppedImage, + FileExtension: 'jpeg', + OriginalFileName: 'image', + FileSize: this.fileSizeToMB(this.croppedImage.length) + } + this.seletedContent.push(fileObject) + return true + } + loadImageFailed() { + // show message + } */ + +} From 2e6b9c85896c648b11337c99742c9cea225e92f1 Mon Sep 17 00:00:00 2001 From: Equilibrium ITO Date: Tue, 26 Mar 2024 14:32:26 +0100 Subject: [PATCH 2/4] x icon creating publication pusht o rigth side --- src/app/app-routing.module.ts | 4 ++++ src/app/app.module.ts | 2 ++ .../publications/new-publication/new-publication.page.html | 2 +- .../publication/new-publication/new-publication.page.html | 2 +- 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2c173ea0c..614b5ce22 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -305,6 +305,10 @@ const routes = [ { path: 'view-document-second-options', loadChildren: () => import('./modals/view-document-second-options/view-document-second-options.module').then( m => m.ViewDocumentSecondOptionsPageModule) + }, + { + path: 'crop-image', + loadChildren: () => import('./modals/crop-image/crop-image.module').then( m => m.CropImagePageModule) } /* diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9b80a69cc..d21866bf4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -93,6 +93,7 @@ import { InputFilterDirective } from './services/directives/input-filter.directi import { VisibilityDirective } from './services/directives/visibility.directive'; import { DeplomaOptionsPageModule } from './shared/popover/deploma-options/deploma-options.module'; import { DiplomaOptionsPage } from './shared/popover/deploma-options/deploma-options.page'; +import { ImageCropperModule } from 'ngx-image-cropper'; // import { ServiceWorkerModule } from '@angular/service-worker'; // import { AngularFireModule } from '@angular/fire'; // import { AngularFireMessagingModule } from '@angular/fire/messaging'; @@ -176,6 +177,7 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; */ // options DeplomaOptionsPageModule, CreateProcessPageModule, + ImageCropperModule ], entryComponents: [ DiplomaOptionsPage, diff --git a/src/app/pages/publications/new-publication/new-publication.page.html b/src/app/pages/publications/new-publication/new-publication.page.html index 76fcf1c07..202359e61 100644 --- a/src/app/pages/publications/new-publication/new-publication.page.html +++ b/src/app/pages/publications/new-publication/new-publication.page.html @@ -34,7 +34,7 @@
-
+
X
diff --git a/src/app/shared/publication/new-publication/new-publication.page.html b/src/app/shared/publication/new-publication/new-publication.page.html index b6bc54cf9..e2982d5c3 100644 --- a/src/app/shared/publication/new-publication/new-publication.page.html +++ b/src/app/shared/publication/new-publication/new-publication.page.html @@ -49,7 +49,7 @@
-
+
X
From a6c8265ab02df686fb1b1e8322112de6149737d9 Mon Sep 17 00:00:00 2001 From: Equilibrium ITO Date: Wed, 27 Mar 2024 10:21:54 +0100 Subject: [PATCH 3/4] added croppe to new publications on mobile --- .../modals/crop-image/crop-image.page.html | 27 +- src/app/modals/crop-image/crop-image.page.ts | 40 ++- .../new-publication/new-publication.page.ts | 278 +++++++++--------- 3 files changed, 194 insertions(+), 151 deletions(-) diff --git a/src/app/modals/crop-image/crop-image.page.html b/src/app/modals/crop-image/crop-image.page.html index 1475b18c6..bf56cd320 100644 --- a/src/app/modals/crop-image/crop-image.page.html +++ b/src/app/modals/crop-image/crop-image.page.html @@ -6,9 +6,9 @@ - +
+ + + + + + + + + + + + + + diff --git a/src/app/modals/crop-image/crop-image.page.ts b/src/app/modals/crop-image/crop-image.page.ts index d9b290049..e748cadaa 100644 --- a/src/app/modals/crop-image/crop-image.page.ts +++ b/src/app/modals/crop-image/crop-image.page.ts @@ -1,4 +1,6 @@ import { Component, OnInit, ViewChild } from '@angular/core'; +import { ModalController } from '@ionic/angular'; +import { NavParams } from '@ionic/angular'; import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper'; @Component({ @@ -12,10 +14,18 @@ export class CropImagePage implements OnInit { croppedImage: any = ''; @ViewChild('cropper') cropper: ImageCropperComponent; capturedImage: any = ""; + base64ToCroppe = ""; - constructor() { } + constructor( + private navParams: NavParams, + private modalController: ModalController, + ) { + this.base64ToCroppe = this.navParams.get('base64ToCroppe') + console.log('To cropp',this.base64ToCroppe) + } ngOnInit() { + console.log('To cropp',this.base64ToCroppe) } fileChangeEvent(event: any): void { @@ -28,19 +38,23 @@ export class CropImagePage implements OnInit { console.log('Croped image 22',this.croppedImage) // event.blob can be used to upload the cropped image } -/* cropperReady() { - if(this.croppedImage != '') - var fileObject = { - FileBase64: this.croppedImage, - FileExtension: 'jpeg', - OriginalFileName: 'image', - FileSize: this.fileSizeToMB(this.croppedImage.length) - } - this.seletedContent.push(fileObject) - return true + + imageLoaded($event){ + } + loadImageFailed() { - // show message - } */ + console.log('cropp iage faile') + } + + save() { + this.modalController.dismiss({ + base64ToCroppe: this.croppedImage + }); + } + + cancel() { + this.modalController.dismiss() + } } diff --git a/src/app/pages/publications/new-publication/new-publication.page.ts b/src/app/pages/publications/new-publication/new-publication.page.ts index 661693ddb..bc823ac54 100644 --- a/src/app/pages/publications/new-publication/new-publication.page.ts +++ b/src/app/pages/publications/new-publication/new-publication.page.ts @@ -37,6 +37,7 @@ import { VideoconvertService } from 'src/app/services/videoconvert.service' import { PublicationAttachmentEntity } from 'src/app/shared/publication/upload/upload-streaming.service'; import { PublicationFromMvService } from "src/app/shared/publication/upload/publication-from-mv.service" import { File } from '../../../models/chatMethod'; +import { CropImagePage } from 'src/app/modals/crop-image/crop-image.page'; const config = { quality: 0.5, @@ -160,7 +161,7 @@ export class NewPublicationPage implements OnInit { ) }) - for(const files of newFiles) { + for (const files of newFiles) { this.PublicationFromMvService.form.Files.push(files) } } @@ -203,36 +204,9 @@ export class NewPublicationPage implements OnInit { resultType: CameraResultType.Base64, source: CameraSource.Camera }); - - console.log(capturedImage) - - 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('take picture', this.removeTextBeforeSlash(picture, ','),) - this.filecontent = true; - this.photoOrVideo = false; - - const newAttachment = new PublicationAttachmentEntity( - { - base64: this.removeTextBeforeSlash(picture, ','), - extension: capturedImage.format, - OriginalFileName: "image", - FileType: 'image' - } - ) - - this.PublicationFromMvService.form.Files.push(newAttachment) - - - }); + this.showCroppModal(); } @@ -268,15 +242,15 @@ export class NewPublicationPage implements OnInit { this.filesSizeSum = this.filesSizeSum + element.size // element.size try { - if (this.platform.is('ios')) { - this.recordevideoIos(element.fullPath, element) - } else { - this.recordVideoAndroid(element.fullPath, element) - } + if (this.platform.is('ios')) { + this.recordevideoIos(element.fullPath, element) + } else { + this.recordVideoAndroid(element.fullPath, element) + } - } catch (e) { - console.error('Unable to write file', e); - } + } catch (e) { + console.error('Unable to write file', e); + } }); @@ -286,36 +260,36 @@ export class NewPublicationPage implements OnInit { } async loadVideo() { - const result = await FilePicker.pickMedia ({ multiple: true, }); + const result = await FilePicker.pickMedia({ multiple: true, }); console.log(result.files) result.files.forEach(async element => { this.filesSizeSum = this.filesSizeSum + element.size if (this.fileSizeToMB(this.filesSizeSum) <= 20) { console.log('pass size verificartion') if (this.checkFileType.checkFileType(element.mimeType) == 'video' && this.platform.is('ios')) { - let resultUrl = decodeURIComponent(element.path); console.log('pass type verification ', resultUrl) - try { + let resultUrl = decodeURIComponent(element.path); console.log('pass type verification ', resultUrl) + try { this.recordevideoIos(resultUrl, element) } catch (error) { console.log('upload video error: ', error) } } else if (this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') { let resultUrl = decodeURIComponent(element.path); - console.log('pass type verification ', resultUrl) - try { - this.loadVideoAndroid(resultUrl,element) - } catch (error) { - console.log('upload video error: ', error) - } + console.log('pass type verification ', resultUrl) + try { + this.loadVideoAndroid(resultUrl, element) + } catch (error) { + console.log('upload video error: ', error) } - } else { - if (this.PublicationFromMvService.form.Files.length === 0) - this.filesSizeSum = 0 - - this.httpErrorHandle.validationMessagge('filessize') } - }); - }; + } else { + if (this.PublicationFromMvService.form.Files.length === 0) + this.filesSizeSum = 0 + + this.httpErrorHandle.validationMessagge('filessize') + } + }); + }; chossePhotoOrVideo() { @@ -676,37 +650,37 @@ export class NewPublicationPage implements OnInit { const stringGerada = this.gerarStringAleatoria(); - this.videoconvertService.convertVideo(fullPath,directory.uri,stringGerada,'mp4').then(async () => { - await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4`}) + this.videoconvertService.convertVideo(fullPath, directory.uri, stringGerada, 'mp4').then(async () => { + await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4` }) - .then(async (content) => { - this.filecontent = true; + .then(async (content) => { + this.filecontent = true; - const file = new File([element.blob], element.name); + const file = new File([element.blob], element.name); - const newAttachment = new PublicationAttachmentEntity( - { - base64: 'data:video/mp4;base64,' + content.data, - extension: 'mp4', - blobFile: file, - FileType: this.checkFileType.checkFileType('mp4') as any, - OriginalFileName: 'load video' - } - ) + const newAttachment = new PublicationAttachmentEntity( + { + base64: 'data:video/mp4;base64,' + content.data, + extension: 'mp4', + blobFile: file, + FileType: this.checkFileType.checkFileType('mp4') as any, + OriginalFileName: 'load video' + } + ) - this.PublicationFromMvService.form.Files.push(newAttachment) + this.PublicationFromMvService.form.Files.push(newAttachment) - const deleteSecretFile = async () => { - await Filesystem.deleteFile({ - path: `${stringGerada}.mp4`, - directory: Directory.Cache, - }); - }; - await deleteSecretFile().then((value) => { - console.log('delete file',value) + const deleteSecretFile = async () => { + await Filesystem.deleteFile({ + path: `${stringGerada}.mp4`, + directory: Directory.Cache, + }); + }; + await deleteSecretFile().then((value) => { + console.log('delete file', value) + }) }) - }) - .catch((erro) => console.error('read converted video erro ', erro)); + .catch((erro) => console.error('read converted video erro ', erro)); }); @@ -726,26 +700,26 @@ export class NewPublicationPage implements OnInit { console.log(savedFile.uri) Filesystem.readFile({ path: savedFile.uri }) - .then(async (content) => { + .then(async (content) => { - this.filecontent = true; + this.filecontent = true; - const file = new File([element.blob], element.name); - window['a'] = element - const newAttachment = new PublicationAttachmentEntity( - { - base64: 'data:video/mp4;base64,' + content.data, - extension: 'mp4', - blobFile: file, - FileType: this.checkFileType.checkFileType( 'mp4') as any, - OriginalFileName: 'load video' - } - ) - this.PublicationFromMvService.form.Files.push(newAttachment) + const file = new File([element.blob], element.name); + window['a'] = element + const newAttachment = new PublicationAttachmentEntity( + { + base64: 'data:video/mp4;base64,' + content.data, + extension: 'mp4', + blobFile: file, + FileType: this.checkFileType.checkFileType('mp4') as any, + OriginalFileName: 'load video' + } + ) + this.PublicationFromMvService.form.Files.push(newAttachment) - }) - .catch((error) => console.error('reade converted video erro ',error)); + }) + .catch((error) => console.error('reade converted video erro ', error)); } catch (error) { console.log('record video android erro ', error) @@ -759,41 +733,42 @@ export class NewPublicationPage implements OnInit { loadVideoAndroid(resultUrl, element) { Filesystem.readFile({ path: resultUrl }) - .then(async (content) => { + .then(async (content) => { - this.filecontent = true; + this.filecontent = true; - if (this.removeTextBeforeSlash(element.mimeType, '/') == "mp4") { + if (this.removeTextBeforeSlash(element.mimeType, '/') == "mp4") { - const newAttachment = new PublicationAttachmentEntity( - { - base64: content.data, - extension: this.removeTextBeforeSlash(element.mimeType, '/'), - FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any, - OriginalFileName: 'load video' - } - ) + const newAttachment = new PublicationAttachmentEntity( + { + base64: content.data, + extension: this.removeTextBeforeSlash(element.mimeType, '/'), + FileType: this.checkFileType.checkFileType(this.removeTextBeforeSlash(element.mimeType, '/')) as any, + OriginalFileName: 'load video' + } + ) - newAttachment.needUpload() - this.PublicationFromMvService.form.Files.push(newAttachment) + newAttachment.needUpload() + this.PublicationFromMvService.form.Files.push(newAttachment) - } else { + } else { + this.capturedImage = 'data:image/jpeg;base64,' + content.data; + this.showCroppModal() + /* const newAttachment = new PublicationAttachmentEntity( + { + base64: 'data:image/jpeg;base64,' + content.data, + extension: this.removeTextBeforeSlash(element.mimeType, '/'), + FileType: this.checkFileType.checkFileType(this.removeTextBeforeSlash(element.mimeType, '/')) as any, + OriginalFileName: 'image' + } + ) - const newAttachment = new PublicationAttachmentEntity( - { - base64: 'data:image/jpeg;base64,' + content.data, - extension: this.removeTextBeforeSlash(element.mimeType, '/'), - FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any, - OriginalFileName: 'image' - } - ) - - this.PublicationFromMvService.form.Files.push(newAttachment) - } + this.PublicationFromMvService.form.Files.push(newAttachment) */ + } - }) - .catch((err) => console.error(err)); + }) + .catch((err) => console.error(err)); } @@ -860,21 +835,21 @@ export class NewPublicationPage implements OnInit { newAttachment.needUpload() this.PublicationFromMvService.form.Files.push(newAttachment) - fileObject ={}; - const deleteSecretFile = async () => { - await Filesystem.deleteFile({ - path: `${filename}.mp4`, - directory: Directory.Cache, - }); - }; - deleteSecretFile().then((value) => { - console.log('delete file',value) - fileObject ={}; - }) - .catch((erro) => console.error('read converted video erro ', erro)); - }); + fileObject = {}; + const deleteSecretFile = async () => { + await Filesystem.deleteFile({ + path: `${filename}.mp4`, + directory: Directory.Cache, + }); + }; + deleteSecretFile().then((value) => { + console.log('delete file', value) + fileObject = {}; + }) + .catch((erro) => console.error('read converted video erro ', erro)); + }); - }); + }); } } catch (error) { @@ -915,5 +890,38 @@ export class NewPublicationPage implements OnInit { } + async showCroppModal() { + const modal = await this.modalController.create({ + component: CropImagePage, + componentProps: { + base64ToCroppe: this.capturedImage + }, + cssClass: 'modal modal-desktop' + }); + + modal.onDidDismiss().then((res) => { + if (res) { + this.capturedImage = res.data + this.filecontent = true; + this.photoOrVideo = false; + + const newAttachment = new PublicationAttachmentEntity( + { + base64: res.data.base64ToCroppe, + extension: 'jpeg', + OriginalFileName: "image", + FileType: 'image' + } + ) + + this.PublicationFromMvService.form.Files.push(newAttachment) + } + }, (error) => { + console.log(error) + }); + + await modal.present(); + } + } From a8044dae2a36017d7b5f7359ca31c8d27a11a0a1 Mon Sep 17 00:00:00 2001 From: Equilibrium ITO Date: Wed, 27 Mar 2024 10:26:23 +0100 Subject: [PATCH 4/4] add width to new publication image preview --- .../publications/new-publication/new-publication.page.html | 2 +- .../publication/new-publication/new-publication.page.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/pages/publications/new-publication/new-publication.page.html b/src/app/pages/publications/new-publication/new-publication.page.html index 3d4b1478d..b03414b28 100644 --- a/src/app/pages/publications/new-publication/new-publication.page.html +++ b/src/app/pages/publications/new-publication/new-publication.page.html @@ -50,7 +50,7 @@ + (click)="imageSize(capturedImage)" style="height: 69px; width: 69px;">
+ name="image" ngDefaultControl [src]="'data:image/jpg;base64,' + seleted.Base64" style="height: 69px; width: 69px;">