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/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..bf56cd320 --- /dev/null +++ b/src/app/modals/crop-image/crop-image.page.html @@ -0,0 +1,43 @@ + + + cropImage + + + + + + + + + + + + + + + + Gravar + + + + + Cancelar + + + + + + + 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..e748cadaa --- /dev/null +++ b/src/app/modals/crop-image/crop-image.page.ts @@ -0,0 +1,60 @@ +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({ + 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 = ""; + base64ToCroppe = ""; + + 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 { + 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 + } + + imageLoaded($event){ + + } + + loadImageFailed() { + 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.html b/src/app/pages/publications/new-publication/new-publication.page.html index a8793f6e5..b03414b28 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 @@ -50,7 +50,7 @@ + (click)="imageSize(capturedImage)" style="height: 69px; width: 69px;"> 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(); + } + } 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 30aeeb420..65e49d75f 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 @@ -64,7 +64,7 @@ + name="image" ngDefaultControl [src]="'data:image/jpg;base64,' + seleted.Base64" style="height: 69px; width: 69px;">