首先，需要安装一个名为"ngx-img-cropper"的第三方库，它可以用于裁剪并生成缩略图。

安装命令：

npm install ngx-img-cropper --save

然后，我们需要在组件中引用它：

import { Component, OnInit } from '@angular/core'; import { ImageCroppedEvent } from 'ngx-image-cropper';

@Component({ selector: 'app-image-uploader', templateUrl: './image-uploader.component.html', styleUrls: ['./image-uploader.component.css'] }) export class ImageUploaderComponent implements OnInit {

imageChangedEvent: any = ''; croppedImage: any = '';

constructor() { }

ngOnInit(): void { }

fileChangeEvent(event: any): void { this.imageChangedEvent = event; }

imageCropped(event: ImageCroppedEvent) { this.croppedImage = event.base64; }

}

在组件中声明变量 "imageChangedEvent" 用于存储图像上传事件， "croppedImage" 用于存储裁剪后的图像。

然后，我们需要在HTML文件中添加以下代码来显示图像上传的UI界面和裁剪框：

在上面的代码中，我们把图像上传事件赋值给变量 "imageChangedEvent"，并将它放在 "image-cropper" 组件中。我们为裁剪器指定了宽高比和大小，并且使用JS库"ImageMagick"将它们调整为裁剪的图像大小。

最后，我们需要添加一个 "Generate thumbnail" 按钮来生成缩略图。 添加此按钮后，将