Angular 角度：上传前自动裁剪图像输入文件

我有一个功能，可以自动上传用户上传的图像

我想要的是，该功能自动裁剪图像，使其成为一个正方形，然后再上传：如果图像太宽，它从中心裁剪，以创建一个正方形；如果图像太小，则放大到最小为300x300px的正方形（在这种情况下，图像质量低不是问题）

我不知道如何继续，有没有一个角度的工具来做这件事

这是我的密码：

您可以使用angular软件包

对于square，您需要像这样使用

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [resizeToWidth]="300"
    [resizeToHeight]="300"
    [aspectRatio]="1/1"     
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

如果您不想显示此组件，可以将其设置为绝对值并隐藏为不透明度？事实上，我没有试过，但我认为它应该适合你

---

在使用此示例之前，请遵循软件包文档中的安装步骤。

我认为您误解了文件上传和类似操作的方式。您应该上传文件，然后服务器可以在再次显示之前将其处理成正方形。您可以使用包

[resizeToWidth]="300" Cropped image will be resized to at most this width (in px)
[resizeToHeight]="300"  Cropped image will be resized to at most this height (in px)
[aspectRatio]="1/1"   // 1/1 The width/height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...)