NoodleNgImageCrop

Description

Angular image cropping component.

The image can be zoomed/rotated, and then cropped. It is responsive, and works under mouse and/or touch events.

This is a port of directive-based code from https://github.com/bcabanes/angular-image-cropper to an Angular (v8 and above) component.

Installation

NPM

Install from npm using

npm install noodle-ng-image-crop

Yarn

Yarn configuration supports packaging via ng-packagr.

Install ng-packagr and Yarn and run the package script from the command line.

yarn package

Copy contents of dist to node_modules/NoodleNgImageCrop in your project folder.

Usage

Import Module/Component

import { NoodleNgImageCrop } from "noodle-ng-image-crop";

@NgModule({
  declarations: [
    NoodleNgImageCrop
    ...
  ],
  imports: [ ... ],
  providers: [ ... ],
  bootstrap: [ ... ]
})
export class AppModule { }

Add to Component

Add the component to your template.

  <noodle-ng-image-crop (onCrop)="onCrop($event)"
                        [cropHeight]="300"
                        [cropWidth]="200"
                        [centerOnInit]="true"
                        [imageSource]=""></noodle-ng-image-crop>

Options

Options can be set on the component:

imageSource string URI for image source to crop, can be a URL or base64 data.
actionButtons Array array of buttons to display in the control panel.
zoom-step number Zoom step. Defaults to 0.1;
show-controls boolean Display or not the control buttons (true by default)
fit-on-init boolean Fit the image on initialization (maintains aspect ratio)
center-on-init boolean Center the image on initialization (maintains aspect ratio)
cropHeight number Height of the crop (and display height of bounding box).
cropWidth number Width of the crop (and display width of bounding box).
maxZoom number Restricts zoom applied to the image to be below a maximum scale.
minZoom number Forces zoom applied to the image to be above a minimum scale.

Handling Output

The crop action emits an onCrop event which can be handled by the parent component. The event emits an NoodleNgImageCropData object.

import { NoodleNgImageCropData } from "noodle-ng-image-crop";

@component {
  ...

  croppedOutput: NoodleNgImageCropData;

  onCrop($event) {
    this.croppedOutput = $event;
  }
}

Models

The NoodleNgImageCropActionButton model contains details bound to the action controls at run time, allowing customisation of label.

  // Action that the button represents. Maps via NoodleNgImageCropAction enumeration to a set of supported actions.
  action: NoodleNgImageCropAction;

  // Text label applied to the button.
  text: string;

  // Css class applied to the button.
  cssClass: string;

The NoodleNgImageCropAction enumeration allows mapping of buttons to supported actions.

  rotateLeft = 1,
  rotateRight,
  zoomIn,
  zoomOut,
  zoomToFit,
  crop

The NoodleNgImageCropData model contains details of the crop applies and is output by the onCrop event. It contains the following:

  // Scaling applied to the source image on crop (effectively zoom factor)
  scale: number = 1;

  // Image rotation on crop
  degrees: number = 0;

  // Pixel based crop position and size
  x: number = 0;
  y: number = 0;
  w: number = 1;  
  h: number = 1;

  // Percentage based crop position and size
  xPercent: number = 0;
  yPercent: number = 0;
  wPercent: number = 1;
  hPercent: number = 1;

  // base64 data URI for the cropped image
  croppedImage: string;

Angular Versions

Version	Angular Version
0.9.0	^17.0.0
0.8.0	^16.0.0
0.7.0	^15.0.0
0.6.0	^14.0.0
0.5.0	^13.0.0
0.4.0	^12.0.0
0.3.0	^11.0.0
0.2.0	^10.0.0
0.1.0	^9.0.0
0.0.14	^8.0.0