在 Angular 中使用cropperJS 裁剪图像，它不会在后端发送裁剪后的图像答案

【问题标题】：Cropping image with cropperJS at Angular it is not sending the cropped image in backend在 Angular 中使用cropperJS 裁剪图像，它不会在后端发送裁剪后的图像
【发布时间】：2020-12-14 13:50:09
【问题描述】：

所以我遇到了一个错误，它没有使用 multer 将裁剪后的图像发送到后端。

我可以在前端上传文件，然后我裁剪图像，但裁剪后的图像不是在后端发送，而是上传到后端的img。

我正在使用 Angular 11 版本的 cropper.js 和某人为 Angular 开发的模块。

这是cropper.js https://fengyuanchen.github.io/cropperjs/ 这是模块https://github.com/matheusdavidson/angular-cropperjs

所以我的想法是这样的。上传照片 -> 裁剪并将其保存在后端的文件夹中。保存有效，但它保存默认img而不是裁剪后的img。当用户使用 click 事件进行 saveImage 时，将裁剪后的图像保存在后端。

这是我的 UI 和方法。

<angular-cropper #angularCropper
[cropperOptions]="imgConfig"
 [imageUrl]="imgUrl | safeurl"></angular-cropper>

 <div class="btn-group">
      <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file" >
        <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*" (change)="fileChangeEvent($event)">
        <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="Import image with Blob URLs">
          <span class="fa fa-upload"></span>
        </span>
      </label>
    </div>



<button type="button" class="btn btn-primary" data-method="crop" title="Crop" (click)="saveImage()">
            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="cropper.crop()">
              <span class="fa fa-check"></span>
            </span>
          </button>

TS 文件

imgUrl;
imageURL;
imageCrop;


@ViewChild("angularCropper", {static: false}) public angularCropper: CropperComponent;
public imgConfig = {
  aspectRatio : 3/4,
  dragMode : "move",
  background : true,
  movable: true,
  rotatable : true,
  scalable: true,
  zoomable: true,
  viewMode: 1,
  checkImageOrigin : true,
  checkCrossOrigin: true,
  width: 0,
  height: 0,
};
  fileChangeEvent(event: any): void {
     this.imgUrl = URL.createObjectURL(event.target.files[0]);
     this.imageCrop = event.target.files[0];
  }

saveImage() {

this.angularCropper.cropper.crop();
  this.imageService.addImage(this.imageCrop).subscribe((res: any) => {
    if (res.body) {
     this.imageService.getImageByID(res.body._id).subscribe((t: Image) => {
      this.imageURL = t.imageUrl;
      console.log(this.imageURL);
     });
    }
  }, (err: any) => {
    console.log(err);
  });
}

这是我的服务

@Injectable({
  providedIn: "root"
})
export class ImageService {
   apiUrl = environment.backend;

  constructor(private http: HttpClient) { }


  addImage(file: File): Observable<any> {
    const formData = new FormData();
    formData.append("file", file);
    const header = new HttpHeaders();
    const params = new HttpParams();

    const options = {
      params,
      reportProgress: true,
      headers: header
    };
    const req = new HttpRequest("POST", `${this.apiUrl}/images/${file.name}`, formData, options);
    return this.http.request(req);
  }
  getImageByID(id: string): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.get<Image>(url).pipe(
    catchError(this.handleError)
    );
    }
  private handleError(error: HttpErrorResponse): any {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    return throwError(
      'Something bad happened; please try again later.');
  }

}

【问题讨论】：

标签： javascript angular typescript cropperjs

【解决方案1】：

你将从cropper组件的输出中裁剪图像..export是输出名称

【讨论】：