CM-ImageCropper

CM-ImageCropper is an Angular library for cropping images with extensive customization options. It allows free or aspect-ratio-constrained cropping, color adjustments, rotation, flipping, and more. The cropped image is returned as a file via an output event.

Demo

Features

• Crop images freely or maintain specific aspect ratios.
• Rotate and flip images.
• Adjust brightness, contrast, saturation, and zoom.
• User-friendly interface with responsive design.
• Outputs the cropped image as a file for easy integration.

Installation

Install the library using npm:

npm install cm-image-cropper

Usage

Import the Module

In your Angular module, include the library:

import { CMImageCropperComponent } from 'cm-image-cropper';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, CMImageCropperComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use the Component

HTML

Add the cropper component to your template:

<cm-image-cropper
  [imageUrl]="selectedImage"
  [config]="cropperConfig"
  [aspectRatios]="aspectRatioOptions"
  (croppedImage)="onCroppedImage($event)"
></cm-image-cropper>

Component

Define the logic in your TypeScript file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedImage: string | null = null;
  cropperConfig = {
    showCrop: true,
    showRotate: true,
    showFlip: true,
    showZoom: true,
    showBrightness: true,
    showContrast: true,
    showSaturation: true
  };
  aspectRatioOptions = [
    { label: 'Free', value: 0 },
    { label: '1:1', value: 1 },
    { label: '16:9', value: 16 / 9 }
  ];

  onCroppedImage(file: File): void {
    console.log('Cropped Image:', file);
  }

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      const reader = new FileReader();
      reader.onload = () => {
        this.selectedImage = reader.result as string;
      };
      reader.readAsDataURL(input.files[0]);
    }
  }
}

Configuration Options

The [config] input accepts the following options:

| Option | Type | Description | Default | |-------------------|---------|-----------------------------------------------|---------| | showCrop | boolean | Enable cropping functionality | true | | showRotate | boolean | Enable rotation tools | true | | showFlip | boolean | Enable flip tools | true | | showZoom | boolean | Enable zoom tools | true | | showBrightness | boolean | Enable brightness adjustment tools | true | | showContrast | boolean | Enable contrast adjustment tools | true | | showSaturation | boolean | Enable saturation adjustment tools | true |

Events

• (croppedImage): Emits the cropped image as a file.

License

This library is open-source and free to use under the MIT License.