angular2-img-cropper nicht die Größe der tatsächlichen Bild beibehalten

Question

Ich versuche, Bild von 4160 * 3120 Größe zu laden und mit ng2 Image Cropper das Verhältnis von hochgeladenen Bild zu erhalten. aber es wird ein fixes Bild (750 * 400) Bild jedes Mal hochgeladen, unabhängig von der tatsächlichen Größe des Croppers.

this.cropperSettings2 = new CropperSettings();   
    this.cropperSettings2.width = 750; 
    this.cropperSettings2.height = 400; 
    this.cropperSettings2.keepAspect = true; 

    this.cropperSettings2.croppedWidth = 750; 
    this.cropperSettings2.croppedHeight = 400; 

    this.cropperSettings2.canvasWidth = 427.367; 
    this.cropperSettings2.canvasHeight = 224; 

    this.cropperSettings2.minWidth = 750; 
    this.cropperSettings2.minHeight = 400; 

    this.cropperSettings2.rounded = false; 
    this.cropperSettings2.minWithRelativeToResolution = false; 

    this.cropperSettings2.cropperDrawSettings.strokeColor = 'rgba(255,255,255,1)'; 
    this.cropperSettings2.cropperDrawSettings.strokeWidth = 2; 
    this.cropperSettings2.noFileInput = true; 

    this.data2 = {}; 

Ist es ein Fehler oder mache ich etwas falsch?

Answer 1

in Ihrem HTML, haben Sie onCrop Ereignis

<div> 
<img-cropper [image]="data1" [settings]="cropperSettings1" (onCrop)="cropped($event)"></img-cropper> 

<span class="result" *ngIf="data1.image" > 
    <img [src]="data1.image" [width]="cropperSettings1.croppedWidth" [height]="cropperSettings1.croppedHeight"> 
</span> 
<button class="btn-primary" (click)="finalCropped($event)">Upload</button> 

In Ihrem .ts Datei cropped()

cropped(bounds: Bounds) { 
this.cropperSettings1.croppedHeight = bounds.bottom - bounds.top; 
this.cropperSettings1.croppedWidth = bounds.right - bounds.left; 

console.log("cropped width: " + this.cropperSettings1.croppedWidth); 
console.log("cropped height: " + this.cropperSettings1.croppedHeight); 
} 

finalCropped(){ 
// upload cropped image using some service. 
this.uploadStr(this.data1.image); 
} 

Hoffnung genannt, dass die Methode definieren, das Ihr Problem löst.