ngx-image-cropper

import { ImageCropperComponent } from "ngx-image-cropper";

import { 
  ImageCropperComponent,
  CropService,
  LoadImageService,
  type CropperOptions,
  type ImageCroppedEvent,
  type CropperPosition,
  type ImageTransform,
  type LoadedImage,
  base64ToFile,
  resizeCanvas
} from "ngx-image-cropper";

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

@Component({
  selector: 'app-cropper',
  standalone: true,
  imports: [ImageCropperComponent],
  template: `
    <image-cropper
      [imageChangedEvent]="imageChangedEvent"
      [maintainAspectRatio]="true"
      [aspectRatio]="4 / 3"
      [resizeToWidth]="256"
      format="png"
      (imageCropped)="imageCropped($event)"
      (imageLoaded)="imageLoaded()"
      (loadImageFailed)="loadImageFailed()">
    </image-cropper>
  `
})
export class CropperComponent {
  imageChangedEvent: Event | null = null;

  onFileChange(event: Event): void {
    this.imageChangedEvent = event;
  }

  imageCropped(event: ImageCroppedEvent): void {
    // event.base64 contains the cropped image as base64
    // event.blob contains the cropped image as Blob
    // event.objectUrl contains the cropped image as object URL
    console.log('Cropped image:', event);
  }

  imageLoaded(): void {
    console.log('Image loaded successfully');
  }

  loadImageFailed(): void {
    console.log('Image load failed');
  }
}

@Component({
  selector: 'image-cropper',
  standalone: true
})
export class ImageCropperComponent {
  // Input properties for image sources
  @Input() imageChangedEvent?: Event | null;
  @Input() imageURL?: string;
  @Input() imageBase64?: string;
  @Input() imageFile?: File;
  @Input() imageAltText?: string;

  // Configuration options
  @Input() options?: Partial<CropperOptions>;
  @Input() output?: 'blob' | 'base64';
  @Input() format?: OutputFormat;
  @Input() autoCrop?: boolean;
  @Input() maintainAspectRatio?: boolean;
  @Input() aspectRatio?: number;
  @Input() resizeToWidth?: number;
  @Input() resizeToHeight?: number;

  // Output events
  readonly imageCropped = output<ImageCroppedEvent>();
  readonly imageLoaded = output<LoadedImage>();
  readonly cropperReady = output<Dimensions>();
  readonly loadImageFailed = output<void>();

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

export class CropService {
  crop(input: CropInput, output: 'blob'): Promise<ImageCroppedEvent> | null;
  crop(input: CropInput, output: 'base64'): ImageCroppedEvent | null;
  getResizeRatio(width: number, height: number, options?: ResizeOptions): number;
  getQuality(options?: { imageQuality?: number }): number;
}

export class LoadImageService {
  loadImageFile(file: File, options: LoadImageOptions): Promise<LoadedImage>;
  loadImageFromURL(url: string, options: LoadImageOptions): Promise<LoadedImage>;
  loadBase64Image(imageBase64: string, options: LoadImageOptions): Promise<LoadedImage>;
  transformLoadedImage(loadedImage: Partial<LoadedImage>, options: LoadImageOptions, forceTransform?: boolean): Promise<LoadedImage>;
}

function base64ToFile(base64Image: string): Blob;
function resizeCanvas(canvas: HTMLCanvasElement, width: number, height: number): void;

interface ImageCroppedEvent {
  base64?: string | null;
  blob?: Blob | null;
  objectUrl?: string | null;
  width: number;
  height: number;
  cropperPosition: CropperPosition;
  imagePosition: CropperPosition;
  offsetImagePosition?: CropperPosition;
}

interface CropperPosition {
  x1: number;
  y1: number;
  x2: number;
  y2: number;
}

interface ImageTransform {
  scale?: number;
  rotate?: number;
  flipH?: boolean;
  flipV?: boolean;
  translateH?: number;
  translateV?: number;
  translateUnit?: '%' | 'px';
}

interface Dimensions {
  width: number;
  height: number;
}

interface LoadedImage {
  original: {
    objectUrl: string;
    image: HTMLImageElement;
    size: Dimensions;
  };
  transformed: {
    objectUrl: string;
    image: HTMLImageElement;
    size: Dimensions;
  };
  exifTransform: ExifTransform;
}

interface LoadImageOptions {
  format?: OutputFormat;
  checkImageType?: boolean;
  canvasRotation?: number;
  containWithinAspectRatio?: boolean;
  aspectRatio?: number;
}

interface CropInput {
  loadedImage: LoadedImage;
  cropper: CropperPosition;
  maxSize: Dimensions;
  transform?: ImageTransform;
  options?: {
    backgroundColor?: string;
    containWithinAspectRatio?: boolean;
    maintainAspectRatio?: boolean;
    aspectRatio?: number;
    format?: OutputFormat;
    canvasRotation?: number;
    imageQuality?: number;
    resizeToWidth?: number;
    resizeToHeight?: number;
    onlyScaleDown?: boolean;
  };
}

interface ExifTransform {
  rotate: number;
  flip: boolean;
}

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';
type OutputType = 'base64' | 'blob';