Class ImageCropper

Constructors

constructor

Properties

aspectRatio bl br buffer canvas canvasHeight? canvasWidth? center cropCanvas croppedImage ctx currentDragTouches currentlyInteracting fileType imageSet isMouseDown keepAspect markers maxXClamp? maxYClamp? minXClamp? minYClamp? pointPool ratioH ratioW srcImage? tl tr vertSquashRatio?

Methods

clampPosition detectVerticalSquash dragCorner dragCrop draw drawCornerCursor drawCursors drawImageIOSFix getBounds getCropBounds getCroppedImage getDragTouchForID getMousePos getSide getTouchPos handleMove handleRelease isImageSet move onMouseDown onMouseMove onMouseUp onTouchEnd onTouchMove onTouchStart resizeCanvas setBounds setImage sign updateClampBounds

Constructors

constructor

  • new ImageCropper(canvas, x?, y?, width?, height?, keepAspect?, touchRadius?): ImageCropper

  • Parameters

    • canvas: HTMLCanvasElement
    • x: number = 0
    • y: number = 0
    • width: number = 100
    • height: number = 50
    • keepAspect: boolean = true
    • touchRadius: number = 20

    Returns ImageCropper

Properties

aspectRatio

aspectRatio: number = 0

bl

bl: CornerMarker

br

br: CornerMarker

buffer

buffer: HTMLCanvasElement

canvas

canvas: HTMLCanvasElement

Optional canvasHeight

canvasHeight?: number

Optional canvasWidth

canvasWidth?: number

center

center: DragMarker

cropCanvas

cropCanvas: HTMLCanvasElement

croppedImage

croppedImage: HTMLImageElement

ctx

ctx: any

currentDragTouches

currentDragTouches: CropTouch[] = ...

currentlyInteracting

currentlyInteracting: boolean

fileType

fileType: string = 'png'

imageSet

imageSet: boolean = false

isMouseDown

isMouseDown: boolean = false

keepAspect

keepAspect: boolean = false

markers

markers: CornerMarker[]

Optional maxXClamp

maxXClamp?: number

Optional maxYClamp

maxYClamp?: number

Optional minXClamp

minXClamp?: number

Optional minYClamp

minYClamp?: number

pointPool

pointPool: PointPool

ratioH

ratioH: number = 1

ratioW

ratioW: number = 1

Optional srcImage

srcImage?: HTMLImageElement

tl

tl: CornerMarker

tr

tr: CornerMarker

Optional vertSquashRatio

vertSquashRatio?: number

Methods

clampPosition

  • clampPosition(x, y): Point

  • Parameters

    • x: number
    • y: number

    Returns Point

detectVerticalSquash

  • detectVerticalSquash(img): number

  • Parameters

    • img: HTMLImageElement

    Returns number

dragCorner

  • dragCorner(x, y, marker): void

  • Parameters

    • x: number
    • y: number
    • marker: CornerMarker

    Returns void

dragCrop

  • dragCrop(x, y, marker): void

  • Parameters

    • x: number
    • y: number
    • marker: DragMarker

    Returns void

draw

  • draw(ctx): void

  • Parameters

    • ctx: any

    Returns void

drawCornerCursor

  • drawCornerCursor(marker, x, y): boolean

  • Parameters

    • marker: CornerMarker
    • x: number
    • y: number

    Returns boolean

drawCursors

  • drawCursors(cropTouch): void

  • Parameters

    • cropTouch: CropTouch

    Returns void

drawImageIOSFix

  • drawImageIOSFix(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh): void

  • Parameters

    • ctx: any
    • img: any
    • sx: any
    • sy: any
    • sw: any
    • sh: any
    • dx: any
    • dy: any
    • dw: any
    • dh: any

    Returns void

getBounds

getCropBounds

  • getCropBounds(): Bounds

  • Returns Bounds

getCroppedImage

  • getCroppedImage(fillWidth?, fillHeight?): HTMLImageElement

  • Parameters

    • Optional fillWidth: number
    • Optional fillHeight: number

    Returns HTMLImageElement

getDragTouchForID

  • getDragTouchForID(id): undefined | CropTouch

  • Parameters

    • id: number

    Returns undefined | CropTouch

getMousePos

  • getMousePos(canvas, evt): undefined | Point

  • Parameters

    • canvas: any
    • evt: MouseEvent

    Returns undefined | Point

getSide

  • getSide(a, b, c): number

  • Parameters

    • a: Point
    • b: Point
    • c: Point

    Returns number

getTouchPos

  • getTouchPos(canvas, touch): undefined | Point

  • Parameters

    • canvas: any
    • touch: Touch

    Returns undefined | Point

handleMove

  • handleMove(newCropTouch): void

  • Parameters

    • newCropTouch: CropTouch

    Returns void

handleRelease

  • handleRelease(newCropTouch): void

  • Parameters

    • newCropTouch: CropTouch

    Returns void

isImageSet

move

  • move(cropTouch): void

  • Parameters

    • cropTouch: CropTouch

    Returns void

onMouseDown

onMouseMove

  • onMouseMove(e): void

  • Parameters

    • e: MouseEvent

    Returns void

onMouseUp

onTouchEnd

  • onTouchEnd(e): void

  • Parameters

    • e: TouchEvent

    Returns void

onTouchMove

  • onTouchMove(e): void

  • Parameters

    • e: TouchEvent

    Returns void

onTouchStart

resizeCanvas

  • resizeCanvas(width, height): void

  • Parameters

    • width: number
    • height: number

    Returns void

setBounds

  • setBounds(bounds): void

  • Parameters

    • bounds: Bounds

    Returns void

setImage

  • setImage(img): void

  • Parameters

    • img: HTMLImageElement

    Returns void

sign

  • sign(x): number

  • Parameters

    • x: any

    Returns number

updateClampBounds

  • updateClampBounds(): void

  • Returns void

Settings

Member Visibility

Theme

On This Page

constructoraspectRatioblbrbuffercanvascanvasHeightcanvasWidthcentercropCanvascroppedImagectxcurrentDragTouchescurrentlyInteractingfileTypeimageSetisMouseDownkeepAspectmarkersmaxXClampmaxYClampminXClampminYClamppointPoolratioHratioWsrcImagetltrvertSquashRatioclampPositiondetectVerticalSquashdragCornerdragCropdrawdrawCornerCursordrawCursorsdrawImageIOSFixgetBoundsgetCropBoundsgetCroppedImagegetDragTouchForIDgetMousePosgetSidegetTouchPoshandleMovehandleReleaseisImageSetmoveonMouseDownonMouseMoveonMouseUponTouchEndonTouchMoveonTouchStartresizeCanvassetBoundssetImagesignupdateClampBounds