angular2-img-cropper 不保持实际图像的大小

Posted 2023-02-25

【中文标题】angular2-img-cropper 不保持实际图像的大小

【英文标题】：angular2-img-cropper not maintaining the size of actual Image

【发布时间】：2017-03-29 11:34:19

【问题描述】：

我正在尝试上传 4160 * 3120 大小的图像，并使用 ng2 Image cropper 来保持上传图像的比例。但无论裁剪器的实际大小如何，它每次都会上传固定大小 (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 = ;

是错误还是我做错了什么？

【问题讨论】：

你能在裁剪事件中展示你在做什么吗？

【参考方案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);
  )

将数据上传到 s3 的 aws 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;
       );
 

希望，这可以解决您的问题。

【讨论】：

您可以分享服务代码以将该 data.image 发送到任何 api 吗？