DefinitelyTyped/types/cropperjs/index.d.ts

// Type definitions for cropperjs 1.1
// Project: https://github.com/fengyuanchen/cropperjs
// Definitions by: Stepan Mikhaylyuk <https://github.com/stepancar>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.2

declare namespace cropperjs {
    enum CropperViewMods {
        CropBoxIsJustWithInTheContainer = 0,
        CropBoxShouldBeWithInTheCanvas = 1,
        CanvasShouldNotBeWithInTheContainer = 2,
        ContainerSshouldBeWithInTheCanvas = 3
    }
    type CropperReadyEvent = CustomEvent;
    interface CropperCropEvent extends CustomEvent {
        detail: Data;
    }
    interface CropperCropStepEvent extends CustomEvent {
        detail: CropStepData;
    }
    interface CropperZoomEvent extends CustomEvent {
        detail: ZoomData;
    }
    interface CropperOptions {
        /**
         * Function called when crop box is ready
         */
        ready?(event: CropperReadyEvent): void;
        /**
         * Function called when crop box is moved or resized
         */
        crop?(event: CropperCropEvent): void;
        /**
         * Function called at start of crop box being moved or resized
         */
        cropstart?(event: CropperCropStepEvent): void;
        /**
         * Function called when crop box is moved
         */
        cropmove?(event: CropperCropStepEvent): void;
        /**
         * Function called when crop box is finished being moved or resized
         */
        cropend?(event: CropperCropStepEvent): void;
        /**
         * Function called when a cropper instance starts to zoom in or zoom out its canvas (image wrapper).
         */
        zoom?(event: CropperZoomEvent): 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;
        /**
         * Check the current image's Exif Orientation information.
         * More exactly, read the Orientation value for rotating or flipping the image, and then override the Orientation
         * value with 1 (the default value) to avoid some issues (1, 2) on iOS devices.
         * Requires to set both the rotatable and scalable options to true at the same time.
         * Note: Don't trust this all the time as some JPG images have incorrect (not standard) Orientation values.
         * @default true
         */
        checkOrientation?: 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 restore the cropped area after resizing the window.
         * @default true
         */
        restore?: 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 CropStepData {
        /**
         * The original event that was triggered
         * Options:
         *   `cropstart`: mousedown, touchstart and pointerdown
         *   `cropmove`: mousemove, touchmove and pointermove
         *   `cropend`: mouseup, touchend, touchcancel, pointerup and pointercancel
         */
        originalEvent: Event;
        /**
         * Options:
         *   'crop': create a new crop box
         *   'move': move the canvas (image wrapper)
         *   'zoom': zoom in / out the canvas (image wrapper) by touch
         *   'e': resize the east side of the crop box
         *   'w': resize the west side of the crop box
         *   's': resize the south side of the crop box
         *   'n': resize the north side of the crop box
         *   'se': resize the southeast side of the crop box
         *   'sw': resize the southwest side of the crop box
         *   'ne': resize the northeast side of the crop box
         *   'nw': resize the northwest side of the crop box
         *   'all': move the crop box (all directions)
         */
        action: string;
    }
    interface ZoomData {
        /**
         * The original event that was triggered
         * Options: wheel, touchmove
         */
        originalEvent: Event;
        /**
         * The old (current) ratio of the canvas
         */
        oldRatio: number;
        /**
         * The new (next) ratio of the canvas (canvasData.width / canvasData.naturalWidth)
         */
        ratio: 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;
        minWidth?: number;
        maxWidth?: number;
        /**
         * the destination height of the output canvas
         */
        height?: number;
        minHeight?: number;
        maxHeight?: number;
        /**
         * a color to fill any alpha values in the output canvas
         */
        fillColor?: string;
    }
}

declare class cropperjs {
    constructor(element: HTMLImageElement, options: cropperjs.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;

    /**
     * Zoom the canvas (image wrapper) to an absolute ratio.
     * Zoom in: requires a positive number (ratio > 0)
     * Zoom out: requires a negative number (ratio < 0)
     */
    zoomTo(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;

    /**
     * Rotate the canvas (image wrapper) to an absolute degree.
     * Rotate right: requires a positive number (degree > 0)
     * Rotate left: requires a negative number (degree < 0)
     */
    rotateTo(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): cropperjs.Data;

    /**
     * Change the cropped area position and size with new data (base on the original image).
     */
    setData(data: cropperjs.Data): void;

    /**
     * Output the container size data.
     */
    getContainerData(): cropperjs.ContainerData;

    /**
     * Output the image position, size and other related data.
     */
    getImageData(): cropperjs.ImageData;

    /**
     * Output the canvas (image wrapper) position and size data.
     */
    getCanvasData(): cropperjs.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: cropperjs.CanvasData): void;

    /**
     * Output the crop box position and size data.
     */
    getCropBoxData(): cropperjs.CropBoxData;

    /**
     * Change the crop box position and size with new data.
     */
    setCropBoxData(data: cropperjs.CropBoxData): void;

    /**
     * Get a canvas drawn the cropped image.
     */
    getCroppedCanvas(options?: cropperjs.CroppedCanvasOptions): HTMLCanvasElement;

    /**
     * Change the aspect ratio of the crop box.
     */
    setAspectRatio(aspectRatio: number): void;

    /**
     * Change the drag mode.
     */
    setDragMode(mode?: 'none' | 'crop' | 'move'): void;
}

export = cropperjs;
export as namespace Cropper;