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 |