Options
All
  • Public
  • Public/Protected
  • All
Menu

Main CROPRO class.

Simple usage example:

let ca = new CropArea(target);
ca.addRenderEventListener((dataUrl, state) => {
    const res = document.createElement('img');
    res.src = dataUrl;
    document.body.appendChild(res);
});
this.ca.show();

Hierarchy

  • CropArea

Index

Constructors

constructor

  • new CropArea(target: HTMLImageElement): CropArea
  • Creates a new CropArea for the specified target image.

    // create an instance of CropArea and pass the target image reference as a parameter
    let cropArea = new cropro.CropArea(document.getElementById('myimg'));
    

    Parameters

    • target: HTMLImageElement

      image object to crop.

    Returns CropArea

Properties

aspectRatios

aspectRatios: IAspectRatio[] = ...

Aspect ratio options. Displayed in the aspect ratio dropdown. When only one option is specified the aspect ratio button is hidden.

displayMode

displayMode: DisplayMode = 'inline'

Display mode. inline for cropping right on top of the original image, popup for a full-screen experience.

popupMargin

popupMargin: number = 30

Margin in pixels between CROPRO popup UI and window borders.

renderAtNaturalSize

renderAtNaturalSize: boolean = false

When set to true resulting image will be rendered at the natural (original) resolution of the target image. Otherwise (default), screen dimensions of the image are used.

default

false (use screen dimensions)

Optional renderHeight

renderHeight: number

When set and renderAtNaturalSize is false sets the height of the rendered image.

Both renderWidth and renderHeight have to be set for this to take effect.

Optional renderImageQuality

renderImageQuality: number

When rendering engine/format supports it (jpeg, for exmample), sets the rendering quality for the resulting image.

In case of image/jpeg the value should be between 0 (worst quality) and 1 (best quality).

renderImageType

renderImageType: string = 'image/png'

Type of image for the rendering result. Eg. image/png (default) or image/jpeg.

default

image/png

Optional renderWidth

renderWidth: number

When set and renderAtNaturalSize is false sets the width of the rendered image.

Both renderWidth and renderHeight have to be set for this to take effect.

styles

styles: StyleManager

Manage style releated settings via the styles property.

targetRoot

targetRoot: HTMLElement

targetRoot is used to set an alternative positioning root for the UI.

This is useful in cases when your target image is positioned, say, inside a div with position: relative;

// set targetRoot to a specific div instead of document.body
cropArea.targetRoot = document.getElementById('myRootElement');
default

document.body

toolbarHeight

toolbarHeight: number = 40

Base height of the toolbar block in pixels.

Accessors

aspectRatio

  • Currently active aspect ratio.

    Returns IAspectRatio

  • Currently active aspect ratio.

    Parameters

    Returns void

gridLines

  • get gridLines(): number
  • set gridLines(value: number): void
  • Number of grid lines in the alignment grid.

    Returns number

  • Number of grid lines in the alignment grid.

    Parameters

    • value: number

    Returns void

instanceNo

  • get instanceNo(): number
  • Returns number

isGridVisible

  • get isGridVisible(): boolean
  • set isGridVisible(value: boolean): void
  • Get whether alginment grid is visible. When set to true alignment grid is shown, hidden otherwise.

    Returns boolean

  • Get whether alginment grid is visible. When set to true alignment grid is shown, hidden otherwise.

    Parameters

    • value: boolean

    Returns void

isOpen

  • get isOpen(): boolean
  • Returns true when CropArea is open and false otherwise.

    readonly

    Returns boolean

paddedImageHeight

  • get paddedImageHeight(): number
  • Returns number

paddedImageWidth

  • get paddedImageWidth(): number
  • Returns number

rotationAngle

  • get rotationAngle(): number
  • set rotationAngle(value: number): void
  • Rotation angle of the original image with the crop area.

    Returns number

  • Rotation angle of the original image with the crop area.

    Parameters

    • value: number

    Returns void

zoomToCropEnabled

  • get zoomToCropEnabled(): boolean
  • set zoomToCropEnabled(value: boolean): void
  • Get whether zoom-to-crop feature is enabled. Set to true to enable zooming to crop area all the time. When set to false the whole image is shown and cropping is done within it.

    Returns boolean

  • Get whether zoom-to-crop feature is enabled. Set to true to enable zooming to crop area all the time. When set to false the whole image is shown and cropping is done within it.

    Parameters

    • value: boolean

    Returns void

Methods

addCloseEventListener

  • Add a close event handler to perform actions in your code after the user clicks on the close button (without saving).

    Parameters

    Returns void

addRenderEventListener

  • Add a render event listener which is called when user clicks on the OK/save button in the toolbar.

    // register an event listener for when user clicks OK/save in the UI
    cropArea.addRenderEventListener(dataUrl => {
      // we are setting the cropping result to replace our original image on the page
      // but you can set a different image or upload it to your server
      document.getElementById('myimg').src = dataUrl;
    });
    

    This is where you place your code to save a resulting image and/or CropAreaState.

    see

    CropAreaState

    Parameters

    Returns void

close

  • close(): void
  • Closes the CropArea UI.

    Returns void

getState

  • Returns the complete state for the CropArea that can be preserved and used to continue cropping next time.

    Returns CropAreaState

removeCloseEventListener

  • Remove a close event handler.

    Parameters

    Returns void

removeRenderEventListener

  • Remove a render event handler.

    Parameters

    Returns void

restoreState

  • Restores CropArea state to continue previous cropping session.

    IMPORTANT: call restoreState() after you've opened the CropArea with show.

    this.cropArea1.show();
    if (this.currentState) {
      this.cropArea1.restoreState(this.currentState);
    }
    

    Parameters

    Returns void

show

  • show(): void
  • Initializes the CropArea and opens the UI.

    Returns void

startRenderAndClose

  • startRenderAndClose(): Promise<void>
  • Initiates rendering of the cropped image. Add an event listener for the render event via addRenderEventListener to get the rendering result.

    Returns Promise<void>

Generated using TypeDoc