Cropperjs height is too large (container height too much)

Cropperjs height is too large (container height too much)

tags (space delimited): JavaScript

Business needs web Avatar cut, with a canvas to write a demo card into a horse, so went to find ready-made, found Cropperjs this lib,4k star.

When used in the Ionic project (do not pack the app), found that height is always far higher than the height of the picture display, find issues author just say to the picture and the maximum width of 100%, here need to note, width:100% also must give the picture a parent container, directly ion-content under is no effect.

<ion-content>  <input type="file" (change)="selectFile($event)">  <div class="img-contaier">      </div>    <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; }}

Cropperjs height is too large (container height too much)