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 + + + + + +
+ +
+ + + + + + + + + + + + + + + +
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;">