HTMLPLUS
Version 1.8.3
Github

    Cropper APIs

    See below to learn more about properties, slots, events, style variables, CSS parts, and methods.

    There is no difference between the APIs of the elements, And the only difference is in the names of the events

    Properties

    Name
    area
    Type
    number
    Default
    0.75
    Attribute
    area
    Reflect
    false
    Description

    A number between 0 and 1. Specifies the automatic cropping area size.

    Name
    aspectRatio
    Type
    number | string
    Default
    undefined
    Attribute
    aspect-ratio
    Reflect
    false
    Description

    Specifies the initial aspect ratio of the viewport.

    Name
    background
    Type
    boolean
    Default
    undefined
    Attribute
    background
    Reflect
    false
    Description

    Shows the grid background of the container.

    Name
    disabled
    Type
    boolean
    Default
    undefined
    Attribute
    disabled
    Reflect
    true
    Description

    Disables the element functionality.

    Name
    guides
    Type
    boolean
    Default
    undefined
    Attribute
    guides
    Reflect
    false
    Description

    Shows the dashed lines above the viewport.

    Name
    indicator
    Type
    boolean
    Default
    undefined
    Attribute
    indicator
    Reflect
    false
    Description

    Shows the center indicator above the viewport.

    Name
    mode
    Type
    'crop' | 'move' | 'none'
    Default
    'move'
    Attribute
    mode
    Reflect
    false
    Description

    Specifies the mode.

    Name
    resizer
    Type
    'both' | 'edge' | 'main'
    Default
    'both'
    Attribute
    resizer
    Reflect
    false
    Description

    Enables to resize the viewport by dragging (Works when the value of the mode property is crop).

    Name
    resizerShape
    Type
    'circle' | 'line' | 'square'
    Default
    'square'
    Attribute
    resizer-shape
    Reflect
    false
    Description

    Specifies the shape of the resizer.

    Name
    responsive
    Type
    boolean | 'reset'
    Default
    'reset'
    Attribute
    responsive
    Reflect
    false
    Description

    Re-renders when resizing the window.

    Name
    shape
    Type
    'circle' | 'rectangle' | 'square'
    Default
    'rectangle'
    Attribute
    shape
    Reflect
    false
    Description

    Specifies the shape of the viewport.

    Name
    src
    Type
    string
    Default
    undefined
    Attribute
    src
    Reflect
    false
    Description

    Specifies the image's src.

    Name
    transparent
    Type
    boolean
    Default
    undefined
    Attribute
    transparent
    Reflect
    false
    Description

    Hides the black modal above the image and under the viewport.

    Name
    value
    Type
    Default
    undefined
    Attribute
    value
    Reflect
    false
    Description

    Gets/Sets data.

    Name
    view
    Type
    'contain' | 'cover' | 'fit' | 'none'
    Default
    'cover'
    Attribute
    view
    Reflect
    false
    Description

    Specifies the view.

    Name
    zoomable
    Type
    boolean | 'touch' | 'wheel'
    Default
    Attribute
    zoomable
    Reflect
    false
    Description

    Enables to zoom the image.

    Name
    zoomRatio
    Type
    number
    Default
    0.1
    Attribute
    zoom-ratio
    Reflect
    false
    Description

    Specifies zoom ratio when zooming the image by wheeling the mouse.

    Name
    overrides
    Type
    Default
    undefined
    Attribute
    overrides
    Reflect
    false
    Description

    Overrides default configuration for specific breakpoints. See Overrides for details.

    Name
    variant
    Type
    Default
    undefined
    Attribute
    variant
    Reflect
    true
    Description

    See Variant for details.

    Slots

    There are no Slots.

    Events

    Name
    plus-crop
    Type
    Cancelable
    false
    Description

    Fires when the image or the viewport is changed.

    Name
    plus-crop-end
    Type
    Cancelable
    false
    Description

    Fires when the image or the viewport changes are finished.

    Name
    plus-crop-move
    Type
    Cancelable
    false
    Description

    Fires when the image or the viewport is changing.

    Name
    plus-crop-start
    Type
    Cancelable
    false
    Description

    Fires when the image or the viewport starts to change.

    Name
    plus-ready
    Type
    EventEmitter<void>
    Cancelable
    false
    Description

    Fires when the image has been loaded and the element is ready for operation.

    Name
    plus-zoom
    Type
    Cancelable
    true
    Description

    Fires when the element starts to zoom in or zoom out.

    CSS Variables

    Name
    --plus-cropper-backdrop-color
    Default
    #{$cropper-backdrop-color}
    Description

    Used to adjust the backdrop color.

    Name
    --plus-cropper-backdrop-opacity
    Default
    #{$cropper-backdrop-opacity}
    Description

    Used to adjust the backdrop opacity.

    Name
    --plus-cropper-guides-color
    Default
    #{$cropper-guides-color}
    Description

    Used to adjust the guides color.

    Name
    --plus-cropper-guides-opacity
    Default
    #{$cropper-guides-opacity}
    Description

    Used to adjust the guides opacity.

    Name
    --plus-cropper-guides-style
    Default
    #{$cropper-guides-style}
    Description

    Used to adjust the guides style.

    Name
    --plus-cropper-guides-weight
    Default
    #{$cropper-guides-weight}
    Description

    Used to adjust the guides weight.

    Name
    --plus-cropper-indicator-color
    Default
    #{$cropper-indicator-color}
    Description

    Used to adjust the indicator color.

    Name
    --plus-cropper-indicator-opacity
    Default
    #{$cropper-indicator-opacity}
    Description

    Used to adjust the indicator opacity.

    Name
    --plus-cropper-indicator-size
    Default
    #{$cropper-indicator-size}
    Description

    Used to adjust the indicator size.

    Name
    --plus-cropper-indicator-weight
    Default
    #{$cropper-indicator-weight}
    Description

    Used to adjust the indicator weight.

    Name
    --plus-cropper-resizer-color
    Default
    #{$cropper-resizer-color}
    Description

    Used to adjust the resizer color.

    Name
    --plus-cropper-resizer-offset
    Default
    #{$cropper-resizer-offset}
    Description

    Used to adjust the resizer offset.

    Name
    --plus-cropper-resizer-opacity
    Default
    #{$cropper-resizer-opacity}
    Description

    Used to adjust the resizer opacity.

    Name
    --plus-cropper-resizer-size
    Default
    #{$cropper-resizer-size}
    Description

    Used to adjust the resizer size.

    Name
    --plus-cropper-resizer-weight
    Default
    #{$cropper-resizer-weight}
    Description

    Used to adjust the resizer weight.

    Name
    --plus-cropper-viewport-color
    Default
    #{$cropper-viewport-color}
    Description

    Used to adjust the viewport color.

    Name
    --plus-cropper-viewport-opacity
    Default
    #{$cropper-viewport-opacity}
    Description

    Used to adjust the viewport opacity.

    Name
    --plus-cropper-viewport-style
    Default
    #{$cropper-viewport-style}
    Description

    Used to adjust the viewport style.

    Name
    --plus-cropper-viewport-weight
    Default
    #{$cropper-viewport-weight}
    Description

    Used to adjust the viewport weight.

    CSS Parts

    There are no CSS Parts.

    Methods

    Name
    flipX
    Type
    void
    Signature
    flipX() => void
    Description

    Flips horizontally.

    Name
    flipY
    Type
    void
    Signature
    flipY() => void
    Description

    Flips vertically.

    Name
    move
    Type
    void
    Signature
    move(offsetX?: number, offsetY?: number) => void
    Description

    Moves the canvas with relative offsets.

    Name
    moveTo
    Type
    void
    Signature
    moveTo(x?: number, y?: number) => void
    Description

    Moves the canvas to an absolute point.

    Name
    reset
    Type
    void
    Signature
    reset() => void
    Description

    Resets the image and viewport to their initial states.

    Name
    rotate
    Type
    void
    Signature
    rotate(degree: number) => void
    Description

    Rotates the image with a relative degree.

    Name
    rotateTo
    Type
    void
    Signature
    rotateTo(degree: number) => void
    Description

    Rotates the image to an absolute degree.

    Name
    toCanvas
    Type
    HTMLCanvasElement
    Signature
    toCanvas() => HTMLCanvasElement
    Description

    Gets canvas from the cropped image.

    Name
    zoom
    Type
    void
    Signature
    zoom(ratio: number) => void
    Description

    Zooms the canvas with a relative ratio.

    Name
    zoomTo
    Type
    void
    Signature
    zoomTo(ratio: number) => void
    Description

    Zooms the canvas to an absolute ratio.