Image Cropper Component

@Component({
  selector: 'image-cropper',
  standalone: true,
  imports: [NgIf]
})
export class ImageCropperComponent implements OnChanges, OnInit, OnDestroy {
  // Image Input Properties
  @Input() imageChangedEvent?: Event | null;
  @Input() imageURL?: string;
  @Input() imageBase64?: string;
  @Input() imageFile?: File;
  @Input() imageAltText?: string;

  // Configuration Properties
  @Input() options?: Partial<CropperOptions>;
  @Input() cropperFrameAriaLabel?: string;
  @Input() output?: 'blob' | 'base64';
  @Input() format?: OutputFormat;
  @Input() autoCrop?: boolean;
  @Input() cropper?: CropperPosition;
  @Input() transform?: ImageTransform;
  @Input() maintainAspectRatio?: boolean;
  @Input() aspectRatio?: number;
  @Input() resetCropOnAspectRatioChange?: boolean;

  // Resize Properties
  @Input() resizeToWidth?: number;
  @Input() resizeToHeight?: number;
  @Input() cropperMinWidth?: number;
  @Input() cropperMinHeight?: number;
  @Input() cropperMaxHeight?: number;
  @Input() cropperMaxWidth?: number;
  @Input() cropperStaticWidth?: number;
  @Input() cropperStaticHeight?: number;

  // Display Properties
  @Input() canvasRotation?: number;
  @Input() initialStepSize?: number;
  @Input() roundCropper?: boolean;
  @Input() onlyScaleDown?: boolean;
  @Input() imageQuality?: number;
  @Input() backgroundColor?: string;
  @Input() containWithinAspectRatio?: boolean;
  @Input() hideResizeSquares?: boolean;
  @Input() allowMoveImage?: boolean;
  @Input() checkImageType?: boolean;
  @Input() alignImage?: 'left' | 'center';
  @Input() disabled?: boolean;
  @Input() hidden?: boolean;

  // Output Events
  readonly imageCropped = output<ImageCroppedEvent>();
  readonly startCropImage = output<void>();
  readonly imageLoaded = output<LoadedImage>();
  readonly cropperReady = output<Dimensions>();
  readonly loadImageFailed = output<void>();
  readonly transformChange = output<ImageTransform>();
  readonly cropperChange = output<CropperPosition>();

  // Public Methods
  crop(): ImageCroppedEvent | null;
  crop(output: 'base64'): ImageCroppedEvent | null;
  crop(output: 'blob'): Promise<ImageCroppedEvent> | null;
  resetCropperPosition(): void;
  keyboardAccess(event: KeyboardEvent): void;
}

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

@Component({
  selector: 'app-advanced-cropper',
  standalone: true,
  imports: [ImageCropperComponent],
  template: `
    <image-cropper
      [imageFile]="selectedFile"
      [maintainAspectRatio]="true"
      [aspectRatio]="16 / 9"
      [resizeToWidth]="800"
      [resizeToHeight]="450"
      [roundCropper]="false"
      [onlyScaleDown]="true"
      [imageQuality]="90"
      [backgroundColor]="'#ffffff'"
      [hideResizeSquares]="false"
      [allowMoveImage]="true"
      [canvasRotation]="0"
      format="jpeg"
      output="blob"
      [autoCrop]="true"
      (imageCropped)="imageCropped($event)"
      (imageLoaded)="imageLoaded($event)"
      (cropperReady)="cropperReady($event)"
      (cropperChange)="cropperPositionChanged($event)"
      (transformChange)="transformChanged($event)"
      (loadImageFailed)="loadImageFailed()"
      (startCropImage)="startCropping()">
    </image-cropper>
  `
})
export class AdvancedCropperComponent {
  selectedFile: File | null = null;

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      this.selectedFile = input.files[0];
    }
  }

  imageCropped(event: ImageCroppedEvent): void {
    if (event.blob) {
      // Handle blob result
      const formData = new FormData();
      formData.append('image', event.blob, 'cropped-image.jpeg');
      // Upload or process the blob
    }
  }

  imageLoaded(loadedImage: LoadedImage): void {
    console.log('Image loaded:', loadedImage.original.size);
  }

  cropperReady(dimensions: Dimensions): void {
    console.log('Cropper ready with dimensions:', dimensions);
  }

  cropperPositionChanged(position: CropperPosition): void {
    console.log('Cropper position changed:', position);
  }

  transformChanged(transform: ImageTransform): void {
    console.log('Image transform changed:', transform);
  }

  loadImageFailed(): void {
    console.error('Failed to load image');
  }

  startCropping(): void {
    console.log('Cropping operation started');
  }
}

/**
 * File input change event containing the selected image file
 */
@Input() imageChangedEvent?: Event | null;

/**
 * URL to load the image from
 */
@Input() imageURL?: string;

/**
 * Base64 encoded image string
 */
@Input() imageBase64?: string;

/**
 * File object containing image data
 */
@Input() imageFile?: File;

/**
 * Alt text for the image for accessibility
 */
@Input() imageAltText?: string;

/**
 * Configuration options object containing cropper settings
 */
@Input() options?: Partial<CropperOptions>;

/**
 * ARIA label for the cropper frame for accessibility
 */
@Input() cropperFrameAriaLabel?: string;

/**
 * Preferred output format: 'blob' or 'base64'
 */
@Input() output?: 'blob' | 'base64';

/**
 * Image output format
 */
@Input() format?: OutputFormat;

/**
 * Automatically crop when image or cropper changes
 */
@Input() autoCrop?: boolean;

/**
 * Initial cropper position
 */
@Input() cropper?: CropperPosition;

/**
 * Image transformation settings
 */
@Input() transform?: ImageTransform;

/**
 * Maintain aspect ratio when resizing the cropper
 */
@Input() maintainAspectRatio?: boolean;

/**
 * Fixed aspect ratio (width/height)
 */
@Input() aspectRatio?: number;

/**
 * Reset crop area when aspect ratio changes
 */
@Input() resetCropOnAspectRatioChange?: boolean;

/**
 * Target width for the output image (pixels)
 */
@Input() resizeToWidth?: number;

/**
 * Target height for the output image (pixels)
 */
@Input() resizeToHeight?: number;

/**
 * Minimum cropper width (pixels)
 */
@Input() cropperMinWidth?: number;

/**
 * Minimum cropper height (pixels)
 */
@Input() cropperMinHeight?: number;

/**
 * Maximum cropper height (pixels)
 */
@Input() cropperMaxHeight?: number;

/**
 * Maximum cropper width (pixels)
 */
@Input() cropperMaxWidth?: number;

/**
 * Fixed cropper width (pixels) - disables horizontal resizing
 */
@Input() cropperStaticWidth?: number;

/**
 * Fixed cropper height (pixels) - disables vertical resizing
 */
@Input() cropperStaticHeight?: number;

/**
 * Emitted when the image is cropped
 */
readonly imageCropped = output<ImageCroppedEvent>();

/**
 * Emitted when cropping operation starts
 */
readonly startCropImage = output<void>();

/**
 * Emitted when image loads successfully
 */
readonly imageLoaded = output<LoadedImage>();

/**
 * Emitted when cropper is ready for interaction
 */
readonly cropperReady = output<Dimensions>();

/**
 * Emitted when image loading fails
 */
readonly loadImageFailed = output<void>();

/**
 * Emitted when image transform changes (scale, rotation, etc.)
 */
readonly transformChange = output<ImageTransform>();

/**
 * Emitted when cropper position changes
 */
readonly cropperChange = output<CropperPosition>();

/**
 * Crop the image with default output type
 * @returns ImageCroppedEvent with cropped image data or null if no image loaded
 */
crop(): ImageCroppedEvent | null;

/**
 * Crop the image to base64 format
 * @param output - Output type 'base64'
 * @returns ImageCroppedEvent with base64 data or null if no image loaded
 */
crop(output: 'base64'): ImageCroppedEvent | null;

/**
 * Crop the image to blob format
 * @param output - Output type 'blob'
 * @returns Promise resolving to ImageCroppedEvent with blob data or null if no image loaded
 */
crop(output: 'blob'): Promise<ImageCroppedEvent> | null;

/**
 * Reset the cropper to its default position and size
 */
resetCropperPosition(): void;

/**
 * Handle keyboard navigation events
 * @param event - KeyboardEvent for cropper navigation
 */
keyboardAccess(event: KeyboardEvent): void;

interface CropperOptions {
  format: OutputFormat;
  output: OutputType;
  autoCrop: boolean;
  maintainAspectRatio: boolean;
  resetCropOnAspectRatioChange: boolean;
  aspectRatio: number;
  resizeToWidth: number;
  resizeToHeight: number;
  cropperMinWidth: number;
  cropperMinHeight: number;
  cropperMaxHeight: number;
  cropperMaxWidth: number;
  cropperStaticWidth: number;
  cropperStaticHeight: number;
  canvasRotation: number;
  roundCropper: boolean;
  onlyScaleDown: boolean;
  imageQuality: number;
  backgroundColor: string | undefined;
  containWithinAspectRatio: boolean;
  hideResizeSquares: boolean;
  alignImage: 'left' | 'center';
  cropperFrameAriaLabel: string | undefined;
  checkImageType: boolean;
}

type OutputFormat = 'png' | 'jpeg' | 'bmp' | 'webp' | 'ico';