angular2-img-cropper無法保持實際圖像的大小

Question

我正在嘗試上傳尺寸為4160 * 3120的圖片，並使用ng2圖片裁切器來保持上傳圖片的比例。 但無論裁切機的實際尺寸如何，每次都會上傳固定尺寸（750 * 400）的圖像。

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

是錯誤還是我做錯了什么？

Answer 1

在您的HTML中，您有onCrop事件

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

在您的.ts文件中，定義名為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);
}

uploadStr(base64Str: string) {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", (ev: ProgressEvent) => {
  //You can handle progress events here if you want to track upload progress (I used an observable<number> to fire back updates to whomever called this upload)
  console.log(ev);
  this.percentageUpload = (ev.loaded / ev.total * 100).toFixed(1).toString() + " %"
});

xhr.upload.addEventListener('loadstart', (ev: ProgressEvent) => {
  // When the request starts.
  this.showProgressBar = true;
  console.log(ev);
});

xhr.upload.addEventListener('load', (ev: ProgressEvent) => {
  // When the request has *successfully* completed.
  // Even if the server hasn't responded that it finished.
  this.showProgressBar = false;
  console.log(ev);
});
xhr.upload.addEventListener('loadend', (ev: ProgressEvent) => {
  // When the request has completed (either in success or failure).
  // Just like 'load', even if the server hasn't 
  // responded that it finished processing the request.
  setTimeout(function () {
    alert('Upload complete, please save profile settings ');
  }, 1000);
  this.showProgressBar = false;
  // this.currentProject.Logo = ;
  console.log(ev);
});
xhr.upload.addEventListener('error', (ev: ProgressEvent) => {
  // When the request has failed.
  this.showProgressBar = false;
  console.log(ev);
});
xhr.upload.addEventListener('abort', (ev: ProgressEvent) => {
  // When the request has been aborted. 
  // For instance, by invoking the abort() method.
  this.showProgressBar = false;
  console.log(ev);
});
xhr.upload.addEventListener('timeout', (ev: ProgressEvent) => {
  // When the author specified timeout has passed 
  // before the request could complete.
  this.showProgressBar = false;
  console.log(ev);
});

var blobObj = this.convertToBlob(base64Str);

this.s3urlService.getPreSignedURL("project")
  .subscribe(data => {
    this.s3data = data;
    this.setFormImageUrl(this.s3data.fileName);
    console.log("Url to upload: " + this.s3data.fileUploadUrl);
    xhr.open("PUT", this.s3data.fileUploadUrl, true);
    xhr.send(blobObj);
  })}

aws s3服務類以將數據上傳到s3。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { ApiService } from './api.service';
import { JwtService } from './jwt.service';
import { S3Url } from '../models';

@Injectable()
export class S3urlService {
  constructor (
  private apiService: ApiService,
  private jwtService: JwtService
  ) {}

  getPreSignedURL(imageType?:string): Observable<S3Url> {
   let requestBody = {
    Username:this.jwtService.getUsername(),
    FileExt:"jpg",
    ImageType: imageType
}

//console.log("in getPreSignedURL");
return this.apiService.post('/',requestBody,2)
       .map(data => {
        return data;
       });
 }}

希望這可以解決您的問題。