pkg-components
Version:
205 lines (183 loc) • 5.57 kB
TypeScript
declare namespace Cropper {
export type Action = 'crop' | 'move' | 'zoom' | 'e' | 's' | 'w' | 'n' | 'ne' | 'nw' | 'se' | 'sw' | 'all'
export type DragMode = 'crop' | 'move' | 'none'
export type ImageSmoothingQuality = 'low' | 'medium' | 'high'
export type ViewMode = 0 | 1 | 2 | 3
export interface Data {
x: number
y: number
width: number
height: number
rotate: number
scaleX: number
scaleY: number
}
export interface ContainerData {
width: number
height: number
}
export interface ImageData {
left: number
top: number
width: number
height: number
rotate: number
scaleX: number
scaleY: number
naturalWidth: number
naturalHeight: number
aspectRatio: number
}
export interface CanvasData {
left: number
top: number
width: number
height: number
naturalWidth: number
naturalHeight: number
}
export interface CropBoxData {
left: number
top: number
width: number
height: number
}
export interface GetCroppedCanvasOptions {
width?: number
height?: number
minWidth?: number
minHeight?: number
maxWidth?: number
maxHeight?: number
rounded?: boolean
fillColor?: string
imageSmoothingEnabled?: boolean
imageSmoothingQuality?: ImageSmoothingQuality
}
export interface SetDataOptions {
x?: number
y?: number
width?: number
height?: number
rotate?: number
scaleX?: number
scaleY?: number
}
export interface SetCanvasDataOptions {
left?: number
top?: number
width?: number
height?: number
}
export interface SetCropBoxDataOptions {
left?: number
top?: number
width?: number
height?: number
}
interface CropperEvent<T extends EventTarget = EventTarget> extends CustomEvent {
currentTarget: T & { cropper: Cropper }
}
export type ReadyEvent<T extends EventTarget> = CropperEvent<T>
export interface CropEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: Data
}
export interface CropEventData {
originalEvent: PointerEvent | TouchEvent | MouseEvent
action: Action
}
export interface CropStartEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: CropEventData
}
export interface CropMoveEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: CropEventData
}
export interface CropEndEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: CropEventData
}
export interface ZoomEventData {
originalEvent: WheelEvent | PointerEvent | TouchEvent | MouseEvent
oldRatio: number
ratio: number
}
export interface ZoomEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: ZoomEventData
}
export interface Options<T extends EventTarget = EventTarget> {
aspectRatio?: number
autoCrop?: boolean
autoCropArea?: number
background?: boolean
center?: boolean
checkCrossOrigin?: boolean
checkOrientation?: boolean
cropBoxMovable?: boolean
cropBoxResizable?: boolean
data?: SetDataOptions
dragMode?: DragMode
guides?: boolean
highlight?: boolean
initialAspectRatio?: number
minCanvasHeight?: number
minCanvasWidth?: number
minContainerHeight?: number
minContainerWidth?: number
minCropBoxHeight?: number
minCropBoxWidth?: number
modal?: boolean
movable?: boolean
preview?: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement> | string
responsive?: boolean
restore?: boolean
rotatable?: boolean
scalable?: boolean
toggleDragModeOnDblclick?: boolean
viewMode?: ViewMode
wheelZoomRatio?: number
zoomOnTouch?: boolean
zoomOnWheel?: boolean
zoomable?: boolean
ready?(event: ReadyEvent<T>): void
crop?(event: CropEvent<T>): void
cropend?(event: CropEndEvent<T>): void
cropmove?(event: CropMoveEvent<T>): void
cropstart?(event: CropStartEvent<T>): void
zoom?(event: ZoomEvent<T>): void
}
}
declare class Cropper {
constructor (element: HTMLImageElement, options?: Cropper.Options<HTMLImageElement>)
constructor (element: HTMLCanvasElement, options?: Cropper.Options<HTMLCanvasElement>)
clear (): Cropper
crop (): Cropper
destroy (): Cropper
disable (): Cropper
enable (): Cropper
getCanvasData (): Cropper.CanvasData
getContainerData (): Cropper.ContainerData
getCropBoxData (): Cropper.CropBoxData
getCroppedCanvas (options?: Cropper.GetCroppedCanvasOptions): HTMLCanvasElement
getData (rounded?: boolean): Cropper.Data
getImageData (): Cropper.ImageData
move (offsetX: number, offsetY?: number): Cropper
moveTo (x: number, y?: number): Cropper
replace (url: string, onlyColorChanged?: boolean): Cropper
reset (): Cropper
rotate (degree: number): Cropper
rotateTo (degree: number): Cropper
scale (scaleX: number, scaleY?: number): Cropper
scaleX (scaleX: number): Cropper
scaleY (scaleY: number): Cropper
setAspectRatio (aspectRatio: number): Cropper
setCanvasData (data: Cropper.SetCanvasDataOptions): Cropper
setCropBoxData (data: Cropper.SetCropBoxDataOptions): Cropper
setData (data: Cropper.SetDataOptions): Cropper
setDragMode (dragMode: Cropper.DragMode): Cropper
zoom (ratio: number): Cropper
zoomTo (ratio: number, pivot?: { x: number, y: number }): Cropper
static noConflict (): Cropper
static setDefaults (options: Cropper.Options<EventTarget>): void
}
declare module 'cropperjs' {
export default Cropper
}