以角度裁剪图像

Question

我正在寻找一个Angular插件来裁剪图像，然后将其上传到数据库，我已经搜索了一整天，但我找到的所有插件甚至已被弃用或不能满足我的需求。

我特别想要的是一个插件：

1. 放大和缩小照片。
2. 裁剪照片。
3. 更改照片格式。

我发现的最佳选择是：

1. 角度图像裁剪器
2. Andy Shora 图像裁剪器
3. ngx-图像裁剪器

第一个几乎是我想要的，但不幸的是它已被弃用，我无法使用它或不知道如何使用它。

我想要类似这个的东西。

有没有办法使用角度13中的第一个？或者有什么好的替代方案吗？

Answer 1

ngx-image-cropper对你有用吗？浏览一下文档，它应该能够执行您想要的操作，只需对 UI 方面进行一些细微的修改。捕捉到网格、突出显示线等。

https://stackblitz.com/edit/angular-ngx-image-cropper?file=src%2Fapp%2Fapp.component.ts

Answer 2

有点晚了，但是StackBlitz中的图像裁剪器有一个缩放选项，可能正是您正在寻找的

Answer 3

如果您正在寻找轻量级的 Angular 图像裁剪器，您可能会发现

ngx-smart-cropper

非常适合。我开发这个工具是为了为现代 Angular 应用程序提供必要的裁剪功能。

• 使用 Angular 19 作为独立组件构建
• 非常轻量级 - 仅 60kb
• 允许有限的定制、裁剪和文件输出

使用 npm 安装它：

npm install ngx-smart-cropper

组件.html

<input type="file" accept='image/*' (change)="onFileChange($event)">

<ngx-smart-cropper
  [imageType]="'webp'"
  [cropX]="50"
  [cropY]="50"
  [cropWidth]="400"
  [cropHeight]="300"
  [theme]="'mixed'"
  [imageSource]="imageSource"
  (imageCroppedEvent)="imageCropped($event)"
></ngx-smart-cropper>

<img [src]="croppedImage"/>

组件.ts

export class MyComponent {
  croppedImage = '';
  imageSource: string = '';

  onFileChange(event: Event): void {

    const input = event.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) return;

    const file = input.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.imageSource = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }

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

ngx-smart-cropper 演示

ngx-smart-cropper npm 包

如果你想进行进一步的图像处理，我建议使用

sharp

，一个高性能的服务器端图像处理node.js包。