Image Cropper

import { Component } from '@angular/core';
import { WrImageCropper } from 'ngwr/image-cropper';

@Component({ imports: [WrImageCropper] })
export class MyComponent {}

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

<wr-image-cropper [src]="src()" (cropped)="onCropped($event)" />

<wr-image-cropper [src]="avatar" [aspectRatio]="1" />

<wr-image-cropper #cropper [src]="file()" (loadError)="lastError.set($event)" />

@if (cropper.status() === 'failed') {
  <wr-alert type="danger" title="This image could not be opened" [message]="message()" />
}

import type { WrImageLoadError } from 'ngwr/image-cropper';

protected readonly file = signal<File | null>(null);
protected readonly lastError = signal<WrImageLoadError | null>(null);

// The error has the file's name and type, not a reason.
protected readonly message = computed(() => {
  const error = this.lastError();
  return `${error?.name ?? 'The file'} is not an image this browser can read.`;
});

<wr-image-cropper [src]="file()" [aspectRatio]="1" [maxOutputSize]="512" (cropped)="upload($event)" />