Utils

warning

It's the part of the unstable API. Use it carefully. Everything can be changed in the future.

Modifiers of state components

Fit Coordinates

function fitCoordinates(state: CropperState, settings: CoreSettings): Coordinates;

Fit Visible Area

function fitVisibleArea(state: CropperState, settings: CoreSettings): VisibleArea;

Resize Coordinates Algorithm

function resizeCoordinatesAlgorithm(    coordinates: Coordinates,    directions: ResizeDirections,    options: ResizeOptions,    limitations: ResizeLimitations,): Coordinates;

interface ResizeOptions {    compensate?: boolean;    preserveRatio?: boolean;    allowedDirections?: ResizeDirections;    respectDirection?: 'width' | 'height';}

interface ResizeLimitations {    aspectRatio: AspectRatio;    sizeRestrictions: SizeRestrictions;    positionRestrictions: PositionRestrictions;}

Move Coordinates Algorithm

function moveCoordinatesAlgorithm(    coordinates: Coordinates,    directions: MoveDirections,    positionRestrictions: PositionRestrictions,): Coordinates;

Round Coordinates

function roundCoordinates(state: CropperState, settings: CoreSettings): Coordinates;

Touch

Get a mean touch

function getMeanTouch(touches: SimpleTouch[]): SimpleTouch;

Calculate geometric properties

function calculateGeometricProperties(touches: SimpleTouch[], container: HTMLElement): GeometricProperties;

Create touch resize event

function createTouchResizeEvent(oldProperties: GeometricProperties, newProperties: GeometricProperties): TransformImageEvent

Create touch resize event

function createTouchMoveEvent(oldTouches: SimpleTouch[], newTouches: SimpleTouch[]): TransformImageEvent

Create wheel resize event

function createWheelResizeEvent(    event: WheelEvent & { wheelDelta?: number },    container: HTMLElement,    ratio = 0.1,): ResizeEvent;

Canvas

Draw the cropped area

function drawCroppedArea(    state: CropperState,    image: HTMLImageElement,    resultCanvas: HTMLCanvasElement,    spareCanvas: HTMLCanvasElement,    options: DrawOptions,)

interface DrawOptions {    width?: number;    height?: number;    minWidth?: number;    maxWidth?: number;    minHeight?: number;    maxHeight?: number;    maxArea?: number;    imageSmoothingQuality?: 'low' | 'medium' | 'high';    imageSmoothingEnabled?: boolean;    fillColor?: string;}

Events

Normalize transform image event

function normalizeTransformImageEvent(state: CropperState, event: TransformImageEvent): TransformImageEvent;

Normalize move event

function normalizeMoveEvent(state: CropperState, event: MoveEvent): MoveEvent;

Normalize resize event

function normalizeResizeEvent(state: CropperState, event: ResizeEvent): ResizeEvent;

Getters

Get area size restrictions

function getAreaSizeRestrictions(state: CropperState, settings: CoreSettings)

Get area position restrictions

function getAreaPositionRestrictions(state: CropperState, settings: CoreSettings)

Get size restrictions

function getSizeRestrictions(state: CropperState, settings: CoreSettings)

Get positions restrictions

function getPositionRestrictions(state: CropperState, settings: CoreSettings)

Get coefficient

function getCoefficient(state: CropperState)

Get stencil coordinates

function getStencilCoordinates(state: CropperState | null)

Get aspect ratio

function getAspectRatio(state: CropperState, settings: CoreSettings)

Get default coordinates

function getDefaultCoordinates(state: CropperState, settings: CoreSettings)

Get default visible area

function getDefaultVisibleArea(state: CropperState, settings: CoreSettings)

Get area size restrictions

function getTransformedImageSize(state: CropperState)

Get area size restrictions

function getComputedTransforms(state: CropperState)

function getMinimumSize(state: CropperState)

Image

Load Image

function loadImage(src: string, settings: LoadImageSettings = {}): Promise<CropperImage>

Get Preview Style

function getImageStyle(image: CropperImage, state: CropperState, transitions: CropperTransitions)

Get Image Style

function getPreviewStyle(    image: CropperImage,    state: CropperState,    transitions: CropperTransitions | null,    size: Size,)

Get Mime Type

function getMimeType(arrayBuffer, fallback = null): string

Size

Approximate Size

function approximateSize(params: {    width: number;    height: number;    sizeRestrictions: SizeRestrictions;    aspectRatio?: AspectRatio;}): Size

State

Compare states

function isEqualState(a: CropperState | null, b: CropperState | null): boolean

Restrictions

Get broken ratio

function getBrokenRatio(currentAspectRatio: number, aspectRatio: AspectRatio): number | undefined

Fit to the size restrictions

function fitToSizeRestrictions(coordinates: Size, sizeRestrictions: SizeRestrictions)

Resize to the size restrictions

function resizeToSizeRestrictions(coordinates: Coordinates, sizeRestrictions: SizeRestrictions)

Convert position restrictions to size restrictions

function positionToSizeRestrictions(positionRestrictions: PositionRestrictions): SizeRestrictions

Merge position restrictions

function mergePositionRestrictions(a: PositionRestrictions, b: PositionRestrictions): SizeRestrictions;

Fit to position restrictions

function fitToPositionRestrictions(coordinates: Coordinates, positionRestrictions: PositionRestrictions): MoveDirections;

Move to position restrictions

function moveToPositionRestrictions(coordinates: Coordinates, positionRestrictions: PositionRestrictions): Coordinates;

Convert coordinates to positions restrictions

function coordinatesToPositionRestrictions(coordinates: Coordinates): PositionRestrictions

Geometry

Rotate size

function rotateSize(size: Size, angle: number)

Rotate point

function rotatePoint(point: Point, angle: number, anchor?: Point)

To limits

function toLimits(object: Coordinates): Limits

Diff

function diff(firstObject: Point, secondObject: Point): Diff

Distance between sizes

function sizeDistance(a: Size, b: Size): number

Get center

function getCenter(object: Coordinates): Point

Get intersections

function getIntersections(object: Coordinates, limits: Limits): Intersections

Apply directions

function applyDirections(coordinates: Coordinates, directions: ResizeDirections): Coordinates

Inverse move

function inverseMove(directions: MoveDirections): MoveDirections

Apply move

function applyMove(object: Coordinates, move: MoveDirections): Coordinates

Apply scale

function applyScale(object: Coordinates, scaleFactor: number, center?: Point, progress?: number): Coordinates

Get ratio

function ratio(object: Size): number

Get maximum scale

function maxScale(size: Size, restrictions: SizeRestrictions): number

Get minimum scale

function minScale(size: Size, restrictions: SizeRestrictions): number

Math

Is roughly equal

function isRoughlyEqual(a: number, b: number, tolerance = 1e-3): boolean;

Is greater

function isGreater(a: number, b: number, tolerance?: number): boolean;

Is lower

function isLower(a: number, b: number, tolerance?: number): boolean;