Press "Enter" to skip to content

An Image Cropper for Angular Component Library

ngx-image-cropper is a simple and lightweight image cropping component for Angular 2/4/5+.

ngx image cropper, angular image cropper stackblitz, image crop and upload in angular, angular image cropper example, angular crop image before upload stackblitz

How to make use of it:

Installation:

npm install ngx-image-cropper --save

1. Add ImageCropperModule to the module imports that will use the image, Cropper.

import { NgModule } from '@angular/core';
import { ImageCropperModule } from 'ngx-image-cropper';

@NgModule({
    imports: [
        ...
        ImageCropperModule
    ],
    declarations: [
        ...
    ],
    exports: [
        ...
    ],
    providers: [
        ...
    ]
})
export class YourModule {
}

2. Add the element to your HTML:

<input type="file" (change)="fileChangeEvent($event)" />

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    format="png"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />

3. And add this to your ts file:

import { ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';

export class YourComponent {
    imageChangedEvent: any = '';
    croppedImage: any = '';

    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
        this.croppedImage = event.base64;
    }
    imageLoaded(image: LoadedImage) {
        // show cropper
    }
    cropperReady() {
        // cropper ready
    }
    loadImageFailed() {
        // show message
    }
}

CSS Variables

NameTypeDefaultDescription
--cropper-outline-colorstringrgba(255,255,255,0.3)The background color you see around the cropper
--cropper-overlay-colorstringrgba(255,255,255)The background color you see around the image

Outputs

NameTypeDescription
imageCroppedImageCroppedEventEmits an ImageCroppedEvent each time the image is cropped
imageLoadedLoadedImageEmits the LoadedImage when it was loaded into the cropper
cropperReadyDimensionsEmits when the cropper is ready to be interacted. The Dimensions object that is returned contains the displayed image size
startCropImagevoidEmits when the component started cropping the image
loadImageFailedvoidEmits when a wrong file type was selected (only png, gif and jpg are allowed)

image cropper for angular, ngx-image-cropper Plugin/Github, angular material image cropper, angular image crop rectangle


See Demo And Download

Official Website(Mawi137): Click Here

This superior jQuery/javascript plugin is developed by Mawi137. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.