cropperjs are too high

Label (Space Separation): JavaScript

Business needs web Avatar cutting, using canvas to write a demo card into a horse, and then go to look for ready-made, found cropperjs This lib, 4k star.

When used in ionic projects (not packaged apps), it is found that the height is always much higher than the height of the image display. Issues The author just said that the maximum width of the picture is 100%. It should be noted here that width: 100% must also give the picture a parent container, which is not useful directly under ion-content.

<ion-content>
  <input type="file" (change)="selectFile($event)">

  <div class="img-contaier">
    <img [src]="src" alt="" height="auto" width="100%" #img>
  </div>
  <img [src]="previewSrc" alt="" #preview>
  <button ion-button (click)="imgCropper()">cropper</button>
</ion-content>

import...

declare const Cropper;

@Component...

export class HomePage {
  public previewSrc: string;
  public cropper: any;
  public src: string;

  @ViewChild('img') img: ElementRef;
  @ViewChild('preview') preview: ElementRef;

  constructor(
    public navCtrl: NavController
  ) { }

  file2Base64(e) {
    const f = e;

    return new Promise((resolve, reject) => {
      if (f) {
        const reader = new FileReader();
        reader.onload = (file => function(_e) {
          resolve({ result: this.result, file: e});
        })(f);
        reader.readAsDataURL(f);
        return;
      }

      reject(`Get none files.`);
    });
  }

  selectFile(e) {
    const file = e.target.files[0];
    if (file) {
      this.file2Base64(file).then((data: any) => {
        this.src = data.result;
        if (this.cropper) this.cropper.destroy();
        this.img.nativeElement.onload = e => {
          this.cropperInit(e);
        }
      });
    }
  }

  cropperInit(e) {
    console.log(e);
    const image = e.target;
    this.cropper = new Cropper(image, {
      viewMode: 1,
      aspectRatio: 1 / 1,
      background: false
    });
  }

  imgCropper() {
    const str = this.cropper.getCroppedCanvas().toDataURL();
    this.previewSrc = str;
  }
}