<ion-header>

  <ion-navbar>
    <ion-title>imageEdit</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <img #img src="https://www.w3schools.com/w3css/img_lights.
  <div>
    <button ion-button>Text</button>
  </div>
</ion-content>

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Gesture } from 'ionic-angular';

@Component({
  selector: 'page-image-edit',
  templateUrl: 'image-edit.html',
})
export class ImageEditPage {

  @ViewChild('img') imgElem: ElementRef;
  img: HTMLImageElement;
  gesture: Gesture;

  constructor() {}

  ionViewDidLoad() {
    this.img = this.imgElem.nativeElement;

    if(!this.img){
      alert('Cannot get img element!');
      return;
    }
    this.img.style.width = '100%';
    this.img.style.height = 'auto';

    this.attachGestures();
  }

  attachGestures(){
    this.gesture = new Gesture(this.imgElem.nativeElement);
    this.gesture.listen();
    this.gesture.on('rotate', (e) =>{
      console.log('rotation');
    });
    this.gesture.on('pinch', (e) =>{
      console.log('pinching');
    });
  }
}