declarations
Version:
[](https://www.npmjs.com/package/declarations)
472 lines (446 loc) • 12.8 kB
TypeScript
// Type definitions for cropperjs
// Project: https://github.com/fengyuanchen/cropperjs
// Definitions by: Stepan Mikhaylyuk <https://github.com/stepancar>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
declare module cropperjs {
export enum CropperViewMods {
CropBoxIsJustWithInTheContainer = 0,
CropBoxShouldBeWithInTheCanvas = 1,
CanvasShouldNotBeWithInTheContainer = 2,
ContainerSshouldBeWithInTheCanvas = 3
}
export interface CropperCustomEvent extends CustomEvent {
detail: Data;
}
export interface CropperOptions {
/**
* Function called when crop box is moved or resized
*/
crop?: (event: CropperCustomEvent) => void;
/**
* Function called at start of crop box being moved or resized
*/
cropstart?: (event: CropperCustomEvent) => void;
/**
* Function called when crop box is moved
*/
cropmove?: (event: CropperCustomEvent) => void;
/**
* Function called when crop box is finished being moved or resized
*/
cropend?: (event: CropperCustomEvent) => void;
/**
* Define the view mode of the cropper.
* @default 0
*/
viewMode?: CropperViewMods;
/**
* Define the dragging mode of the cropper.
* 'crop': create a new crop box
* 'move': move the canvas
* 'none': do nothing
*/
dragMode?: string;
/**
* Set the aspect ratio of the crop box. By default, the crop box is free ratio.
* @default Nan
*/
aspectRatio?: number;
/**
* The previous cropped data if you had stored, will be passed to setData method automatically.
* @default null
*/
data?: Object;
/**
* Add extra elements (containers) for previewing.
* Valid selector for Document.querySelectorAll
* @default ''
*/
preview?: string;
/**
* Rebuild the cropper when resize the window.
* @default true
*/
responsive?: boolean;
/**
* By default, the plugin will check the image origin, and if it is a cross-origin image,
* a crossOrigin attribute will be added to the image element and a timestamp will be added to the image url to reload the image for "getCroppedCanvas".
* By adding crossOrigin attribute to image will stop adding timestamp to image url, and stop reload of image.
* @default true
*/
checkCrossOrigin?: boolean;
/**
* Show the black modal above the image and under the crop box.
* @default true
*/
modal?: boolean;
/**
* Show the dashed lines above the crop box.
* @default true
*/
guides?: boolean;
/**
* Show the center indicator above the crop box.
* @default true
*/
center?: boolean;
/**
* Show the white modal above the crop box (highlight the crop box).
* @default true
*/
highlight?: boolean;
/**
* Show the grid background of the container.
* @default true
*/
background?: boolean;
/**
* Enable to crop the image automatically when initialize.
* @default true
*/
autoCrop?: boolean;
/**
* A number between 0 and 1. Define the automatic cropping area size (percentage).
* @default 0.8 (80% of the image)
*/
autoCropArea?: number;
/**
* Enable to move the image.
* @default true
*/
movable?: boolean;
/**
* Enable to rotate the image.
* @default true
*/
rotatable?: boolean;
/**
* Enable to scale the image.
* @default true
*/
scalable?: boolean;
/**
* Enable to zoom the image.
* @default true
*/
zoomable?: boolean;
/**
* Enable to zoom the image by dragging touch.
* @default true
*/
zoomOnTouch?: boolean;
/**
* Enable to zoom the image by wheeling mouse.
* @default true
*/
zoomOnWheel?: boolean;
/**
* Define zoom ratio when zoom the image by wheeling mouse.
* @default 0.1
*/
wheelZoomRatio?: number;
/**
* Enable to move the crop box.
* @default true
*/
cropBoxMovable?: boolean;
/**
* Enable to resize the crop box.
* @default true
*/
cropBoxResizable?: boolean;
/**
* Enable to toggle drag mode between "crop" and "move" when click twice on the cropper.
* @default true
*/
toggleDragModeOnDblclick?: boolean;
/**
* The minimum width of the container
* @default 200
*/
minContainerWidth?: number;
/**
* The minimum height of the container.
* @default 100
*/
minContainerHeight?: number;
/**
* The minimum width of the canvas (image wrapper).
* @default 0
*/
minCanvasWidth?: number;
/**
* The minimum height of the canvas (image wrapper).
* @default 0
*/
minCanvasHeight?: number;
/**
* The minimum width of the crop box.
* @default 0
*/
minCropBoxWidth?: number;
/**
* The minimum height of the crop box.
* @default 0
*/
minCropBoxHeight?: number;
/**
* This function will be called when a cropper instance starts to load an image.
* Return false to prevent to build
* @default null
*/
build?: () => boolean;
/**
* This function will be called when a cropper instance has built completely.
* @default null
*/
built?: () => void;
}
interface Data {
/**
* the offset left of the cropped area
*/
x: number;
/**
* the offset top of the cropped area
*/
y: number;
/**
* the width of the cropped area
*/
width: number;
/**
* the height of the cropped area
*/
height: number;
/**
* the rotated degrees of the image
*/
rotate: number;
/**
* the scaling factor to apply on the abscissa of the image
*/
scaleX: number;
/**
* the scaling factor to apply on the ordinate of the image
*/
scaleY: number;
}
interface ContainerData {
/**
* The current width of the container
*/
width: number;
/**
* The current height of the container
*/
height: number;
}
interface CropBoxData {
/**
* the offset left of the crop box
*/
left: number;
/**
* the offset top of the crop box
*/
top: number;
/**
* the width of the crop box
*/
width: number;
/**
* the height of the crop box
*/
height: number;
}
interface CanvasData {
/**
* offset left of the canvas
*/
left: number;
/**
* new offset top of the canvas
*/
top: number;
/**
* new width of the canvas
*/
width: number;
/**
* new height of the canvas
*/
height: number;
}
interface ImageData {
/**
* the offset left of the image
*/
left: number;
/**
* the offset top of the image
*/
top: number;
/**
* the width of the image
*/
width: number;
/**
* the height of the image
*/
height: number;
/**
* the natural width of the image
*/
naturalWidth: number;
/**
* the natural height of the image
*/
naturalHeight: number;
/**
* the aspect ratio of the image
*/
aspectRatio: number;
/**
* the rotated degrees of the image if rotated
*/
rotate: number;
/**
* the scaling factor to apply on the abscissa of the image if scaled
*/
scaleX: number;
/**
* the scaling factor to apply on the ordinate of the image if scaled
*/
scaleY: number;
}
interface CroppedCanvasOptions {
/**
* the destination width of the output canvas
*/
width?: number;
/**
* the destination height of the output canvas
*/
height?: number;
/**
* a color to fill any alpha values in the output canvas
*/
fillColor?: string;
}
export class Cropper {
constructor(element: HTMLImageElement, options: CropperOptions);
/**
* Show the crop box manually.
*/
crop(): void;
/**
* Clear the crop box.
*/
reset(): void;
/**
* Replace the image's src and rebuild the cropper.
* @param url A new image url
*/
replace(url: string): void;
/**
* Enable (unfreeze) the cropper.
*/
enable(): void;
/**
* Disable (freeze) the cropper
*/
disable(): void;
/**
* Destroy the cropper and remove the instance from the image.
*/
destroy(): void;
/**
* Move the canvas (image wrapper) with relative offsets.
* @param offsetX Moving size (px) in the horizontal direction.
* @param offsetY Moving size (px) in the vertical direction.
* If not present, its default value is offsetX.
*/
move(offsetX: number, offsetY?: number): void;
/**
* Move the canvas (image wrapper) to an absolute point.
* @param x The left value of the canvas
* @param y The top value of the canvas
* If not present, its default value is x.
*/
moveTo(x: number, y?: number): void;
/**
* Zoom the canvas (image wrapper) with a relative ratio.
* Zoom in: requires a positive number (ratio > 0)
* Zoom out: requires a negative number (ratio < 0)
*/
zoom(ratio: number): void;
/**
* Rotate the canvas (image wrapper) with a relative degree.
* Rotate right: requires a positive number (degree > 0)
* Rotate left: requires a negative number (degree < 0)
*/
rotate(degree: number): void;
/**
* Clear the crop box.
*/
clear(): void;
/**
* Output the cropped area position and size data (base on the original image).
*/
getData(rounded?: boolean): Data;
/**
* Change the cropped area position and size with new data (base on the original image).
*/
setData(data: Data): void;
/**
* Output the container size data.
*/
getContainerData(): ContainerData;
/**
* Output the image position, size and other related data.
*/
getImageData(): ImageData;
/**
* Output the canvas (image wrapper) position and size data.
*/
getCanvasData(): CanvasData & {
/**
* the natural width of the canvas (read only)
*/
naturalWidth: number;
/**
* the natural height of the canvas (read only)
*/
naturalHeight: number;
};
/**
* Change the canvas (image wrapper) position and size with new data.
*/
setCanvasData(data: CanvasData): void;
/**
* Output the crop box position and size data.
*/
getCropBoxData(): CropBoxData;
/**
* Change the crop box position and size with new data.
*/
setCropBoxData(data: CropBoxData): void;
/**
* Get a canvas drawn the cropped image.
*/
getCroppedCanvas(options?: CroppedCanvasOptions): HTMLCanvasElement;
/**
* Change the aspect ratio of the crop box.
*/
setAspectRatio(aspectRatio: number): void;
/**
* Change the drag mode.
*/
setDragMode(mode?: 'none' | 'crop' | 'move'): void;
}
}
declare module "cropperjs" {
const Cropper: typeof cropperjs.Cropper;
export = Cropper;
}