Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
ImageAreaSelect
ImageAreaSelect is a widget for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).
Components and more
ClientBehaviours
Converters
Functions, Utils
BlockUI
Calculator
Clipboard
CodeMirror
CodeScanner
CookiePolicy
Counter
Credit Card
ClockPicker
Document Viewer
DynaForm
EChart
FluidGrid
Fuzzy Search
GChart
ImageAreaSelect
ImageRotateAndResize
ImageZoom
InputOtp
InputPhone
InputPlace
Keynote
Layout
Legend
LightSwitch
Localized
MarkdownEditor
MasterDetail
MonacoEditor
Orgchart
OpenStreetMap
QRCode
RemoteCommand
Session
Sheet
SlideOut
Speedtest
SunEditor
Timer
TimeAgo
TimePicker
Tooltip
TriStateManyCheckbox
Waypoint
Use Cases
Basic Selection
Customized Selection
ImageAreaSelect with ImageRotateAndResize
Documentation pe:imageAreaSelect
Attributes (move mouse over the names to see data types)
Name
Description
id
Unique identifier of the component in a naming container.
rendered
Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding
An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar
Name of the client side widget.
for
The target image.
aspectRatio
A string of the form "width:height" which represents the aspect ratio to maintain. Example: "4:3".
autoHide
If set to true, selection area will disappear when selection ends. Default value: false.
fadeSpeed
If set to a number greater than zero, showing or hiding the plugin is done with a graceful fade in/fade out animation. Default value: 0.
handles
If set to true, resize handles are shown on the selection area; if set to "corners", only corner handles are shown. Default value: false.
hide
If set to true, selection area is hidden.
imageHeight
True height of the image (if scaled with the CSS width and height properties).
imageWidth
True width of the image (if scaled with the CSS width and height properties).
movable
Determines whether the selection area should be movable. Default value: true.
persistent
If set to true, clicking outside the selection area will not start a new selection (i.e. the user will only be able to move/resize the existing selection area). Default value: false.
resizable
Determines whether the selection area should be resizable. Default value: true.
show
If set to true, selection area is shown.
zIndex
The z-index value to be assigned to plugin elements; normally, imgAreaSelect figures it out automatically, but there are a few cases when it's necessary to set it explicitly.
maxHeight
Maximum selection height (in pixels).
maxWidth
Maximum selection width (in pixels).
minHeight
Minimum selection height (in pixels).
minWidth
Minimum selection width (in pixels).
parentSelector
A jQuery object or selector string that specifies the parent element that the plugin will be appended to. Default value: "body".
keyboardSupport
Enables/disables keyboard support. Default value: false.
Events (move mouse over the names to see classes)
Name
Description
selectEnd
fired after the selection finished
selectStart
fired after the selection started
selectChange
fired after the selection changed
PrimeFaces Extensions Showcase - © 2011-2023,
PrimeFaces: 14.0.5,
PrimeFaces Extensions: 14.0.5,
JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,
Server: jetty/9.4.36.v20210114,
Build time: 2024-09-10 21:01
occured!