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
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 (ie. 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
selectEndfired after the selection finished
selectStartfired after the selection started
selectChangefired after the selection changed
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.3,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2022-04-17 14:55