What's HTMLPLUS?   Why HTMLPLUS?   UI Components   
HTMLPLUS

Cropper

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

Properties

Name
area
Type
number
Default
0.75
Default
0.75
Attribute
area
Reflect
false
Description
Name
aspectRatio
TypeDefault
undefined
Default
undefined
Attribute
aspect-ratio
Reflect
false
Description
Name
backdrop
Type
boolean
Default
Default
Attribute
backdrop
Reflect
false
Description
Name
background
Type
boolean
Default
undefined
Default
undefined
Attribute
background
Reflect
false
Description
Name
disabled
Type
boolean
Default
undefined
Default
undefined
Attribute
disabled
Reflect
false
Description
Name
guides
Type
boolean
Default
undefined
Default
undefined
Attribute
guides
Reflect
false
Description
Name
indicator
Type
boolean
Default
undefined
Default
undefined
Attribute
indicator
Reflect
false
Description
Name
mode
TypeDefault
'move'
Default
'move'
Attribute
mode
Reflect
false
Description
Name
resizer
TypeDefault
'both'
Default
'both'
Attribute
resizer
Reflect
false
Description
Name
resizerShape
TypeDefault
'square'
Default
'square'
Attribute
resizer-shape
Reflect
false
Description
Name
responsive
TypeDefault
'reset'
Default
'reset'
Attribute
responsive
Reflect
false
Description
Name
shape
TypeDefault
'rectangle'
Default
'rectangle'
Attribute
shape
Reflect
false
Description
Name
src
Type
string
Default
undefined
Default
undefined
Attribute
src
Reflect
false
Description
Name
value
TypeDefault
undefined
Default
undefined
Attribute
value
Reflect
false
Description
Name
view
TypeDefault
'cover'
Default
'cover'
Attribute
view
Reflect
false
Description
Name
zoomable
TypeDefault
Default
Attribute
zoomable
Reflect
false
Description
Name
zoomRatio
Type
number
Default
0.1
Default
0.1
Attribute
zoom-ratio
Reflect
false
Description

Events

Name
plusReady
Type
EventEmitter<void>
Cancelable
false
Description
Name
plusCrop
Type
EventEmitter<void>
Cancelable
false
Description
Name
plusZoom
TypeCancelable
true
Description

CSS Variables

Name
--plus-cropper-backdrop-color
Default
undefined
Default
undefined
Description
Name
--plus-cropper-backdrop-opacity
Default
undefined
Default
undefined
Description
Name
--plus-cropper-guides-color
Default
undefined
Default
undefined
Description
Name
--plus-cropper-guides-opacity
Default
undefined
Default
undefined
Description
Name
--plus-cropper-guides-style
Default
undefined
Default
undefined
Description
Name
--plus-cropper-guides-weight
Default
undefined
Default
undefined
Description
Name
--plus-cropper-indicator-color
Default
undefined
Default
undefined
Description
Name
--plus-cropper-indicator-opacity
Default
undefined
Default
undefined
Description
Name
--plus-cropper-indicator-size
Default
undefined
Default
undefined
Description
Name
--plus-cropper-indicator-weight
Default
undefined
Default
undefined
Description
Name
--plus-cropper-resizer-color
Default
undefined
Default
undefined
Description
Name
--plus-cropper-resizer-offset
Default
undefined
Default
undefined
Description
Name
--plus-cropper-resizer-opacity
Default
undefined
Default
undefined
Description
Name
--plus-cropper-resizer-size
Default
undefined
Default
undefined
Description
Name
--plus-cropper-resizer-weight
Default
undefined
Default
undefined
Description
Name
--plus-cropper-viewport-color
Default
undefined
Default
undefined
Description
Name
--plus-cropper-viewport-opacity
Default
undefined
Default
undefined
Description
Name
--plus-cropper-viewport-style
Default
undefined
Default
undefined
Description
Name
--plus-cropper-viewport-weight
Default
undefined
Default
undefined
Description

Methods

Name
flipX
Type
void
Signature
flipX() => void
Description
Name
flipY
Type
void
Signature
flipY() => void
Description
Name
move
Type
void
Signature
move(offsetX?: number, offsetY?: number) => void
Description
Name
moveTo
Type
void
Signature
moveTo(x?: number, y?: number) => void
Description
Name
reset
Type
void
Signature
reset() => void
Description
Name
rotate
Type
void
Signature
rotate(degree: number) => void
Description
Name
rotateTo
Type
void
Signature
rotateTo(degree: number) => void
Description
Name
toBlob
Type
Promise<Blob>
Signature
toBlob() => Promise<Blob>
Description
Name
toCanvas
Type
HTMLCanvasElement
Signature
toCanvas() => HTMLCanvasElement
Description
Name
toBase64
Type
string
Signature
toBase64() => string
Description
Name
toURL
Type
Promise<string>
Signature
toURL() => Promise<string>
Description
Name
zoom
Type
void
Signature
zoom(ratio: number) => void
Description
Name
zoomTo
Type
void
Signature
zoomTo(ratio: number) => void
Description

Contributors

Contributor abdolianPrev
Counter
Next
Dialog

Select Your Framework

React logo   React