Can't get any events to work in ionic

[steveacalabro]

I tried bringing this, (And just regular cropperjs) into ionic3 and it seems to do nothing. The cropper loads but trying to change it or move the image does nothing. Any suggestions?

[matheusdavidson]

It should work out of the box, its just angular and javascript. Are you trying to move the cropper by touch or events? if by events, are you accessing the cropper through @ViewChild?

Maybe the problem is with touch events, can you provide me a plunker or github with your project or example?

[steveacalabro]

I can't share the project since it is apart of a larger application however here are the snippets how I am using it. I think it is something with touch events.

<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons start>
      <button ion-button (click)="cropperReset()">Reset</button>
    </ion-buttons>
    <ion-buttons padding-left padding-right end>
      <button ion-button icon-only (click)="imageRotate()">
        <ion-icon name='refresh'></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons padding-left padding-right end>
      <button ion-button icon-only (click)="cancel()">
        <ion-icon name='close'></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons padding-left padding-right end>
      <button ion-button icon-only (click)="finish()">
        <ion-icon name='checkmark'></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div ion-fixed>
    <angular-cropper #angularCropper [cropperOptions]="{ aspectRatio: 1 / 1, dragMode: 'crop' }" [imageUrl]="imageBase64"></angular-cropper>
  </div>
</ion-content>

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CropImageModalPage } from './crop-image-modal';

import { AngularCropperjsModule } from 'angular-cropperjs';

@NgModule({
  declarations: [
    CropImageModalPage,
  ],
  imports: [
    IonicPageModule.forChild(CropImageModalPage),
    AngularCropperjsModule,
  ],
  entryComponents: [
    CropImageModalPage
  ]
})
export class CropImageModalPageModule {}

import { Component, ElementRef, ViewChild } from '@angular/core';
import { AngularCropperjsComponent } from 'angular-cropperjs';
import { NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-crop-image-modal',
  templateUrl: 'crop-image-modal.html'
})
export class CropImageModalPage {
  @ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent;
  imageBase64: any;
  width: number;
  height: number;

  constructor(public viewCtrl: ViewController, public navParams: NavParams) {
    this.imageBase64 = this.navParams.get('imageBase64');
    this.width = this.navParams.get('width');
    this.height = this.navParams.get('height');
  }

  ionViewDidLoad() {
  }

  cropperReset() {
    this.angularCropper.cropper.reset();
  }

  imageRotate() {
    this.angularCropper.cropper.rotate(90);
  }

  cancel() {
    this.viewCtrl.dismiss();
  }

  finish() {
    let croppedImgB64String: string = this.angularCropper.cropper.getCroppedCanvas().toDataURL('image/jpeg', (100 / 100));
    this.viewCtrl.dismiss(croppedImgB64String);
  }
}

[matheusdavidson]

Your problem may not be the cropper but the toolbar.

I've had a problem with ionic in the past that buttons inside the toolbar did not trigger the click event, could you try console inside those methods just to check if they are really being triggered?

[matheusdavidson]

Just tested, it works with ionic: https://plnkr.co/edit/4vNgFI2GhBGyquATQRWm?p=preview

[steveacalabro]

Did you try it on a device?

[matheusdavidson]

Just tested now, its working

[ChitOoNaung]

Hello, Why error when import AngularCropperjsComponent in v3.

import { AngularCropperjsComponent } from 'angular-cropperjs';

[fidaktk]

Just tested, it works with ionic: https://plnkr.co/edit/4vNgFI2GhBGyquATQRWm?p=preview

doesn't work properly on a touch device.

[prescindivel]

Just tested, it works with ionic: https://plnkr.co/edit/4vNgFI2GhBGyquATQRWm?p=preview

doesn't work properly on a touch device.

@fidaktk I resolve this with (https://github.com/fengyuanchen/cropperjs/issues/143#issuecomment-406210438)

<angular-cropper (touchstart)="cropperTouchStart($event)" (ready)="readyCrop($event)" #angularCropper [cropperOptions]="cropperOptions" [imageUrl]="this.URI"></angular-cropper>

  cropperTouchStart(event){
    event.stopPropagation();
    event.preventDefault(); //Most important
  }