2017-03-29 7 views
0

4160 * 3120 크기의 이미지를 업로드하고 ng2 이미지 자르기를 사용하여 업로드 된 이미지의 비율을 유지하려고합니다. 하지만 실제 크기의 크롭과 상관없이 매번 픽스 크기 (750 * 400)의 이미지를 업로드합니다.angular2-img-cropper가 실제 크기를 유지하지 않음 Image

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 = {}; 

버그입니까 아니면 잘못하고 있습니까? 당신의 HTML에서

+0

자른 이벤트에서 수행중인 작업을 보여줄 수 있습니까? –

답변

0

, 당신은이 방법으로 문제가 해결, 당신의 .TS에서

<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> 

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); 
} 

희망라는 이름의 메소드를 정의 파일 onCrop 이벤트가 있습니다.