PrimeFaces Extensions Showcase

ImageAreaSelect

It's also possible to combine ImageAreaSelect and ImageRotateAndResize.

With the imageRotateAndResize widget, the image will be completely redrawn and the ImageAreaSelect will stop working after a resize or rotate action. We can simply fix this with call reload() of the ImageAreaSelect Javascript widget. If you don't need a listener for the resize or rotate event on the server, you could use pe:javascript to reload the ImageAreaSelect widget. In this example the resize event is also catched with pe:javascript.

Source

XHTML page
Managed bean


<p:outputPanel id="example">
    <p:commandLink update="example">
        <f:setPropertyActionListener target="#{imageController.imageUrl}" value="/resources/images/testImage1.png" />
        <p:graphicImage value="/resources/images/testImage1.png" width="150" height="100"/>
    </p:commandLink>
    <p:commandLink update="example">
        <f:setPropertyActionListener target="#{imageController.imageUrl}" value="/resources/images/testImage2.png" />
        <p:graphicImage value="/resources/images/testImage2.png" width="150" height="100"/>
    </p:commandLink>
    <p:commandLink update="example">
        <f:setPropertyActionListener target="#{imageController.imageUrl}" value="/resources/images/testImage3.png" />
        <p:graphicImage value="/resources/images/testImage3.png" width="150" height="100"/>
    </p:commandLink>

    <p:growl id="growl" showDetail="true" sticky="true" />

    <div id="imageWrapper" style="width:600px; height:400px; margin:auto; overflow:scroll; position:relative;">
        <p:graphicImage id="myImage" value="#{imageController.imageUrl}" />
    </div>

    <pe:imageAreaSelect id="areaSelect"
        for="myImage"
        widgetVar="areaSelectWidget"
        autoHide="true"
        handles="false"
        movable="false"
        persistent="false"
        resizable="false"
        parentSelector="#imageWrapper">
        <p:ajax event="selectEnd" listener="#{imageController.selectEndListener}" update="growl"/>
    </pe:imageAreaSelect>

    <pe:imageRotateAndResize id="rotateAndResize" for="myImage" widgetVar="rotateAndResizeWidget">
        <p:ajax event="rotate" listener="#{imageController.rotateListener}"
                update="growl" oncomplete="PF('areaSelectWidget').reload();"/>
        <pe:javascript event="resize" execute="PF('areaSelectWidget').reload();"/>
    </pe:imageRotateAndResize>

    <p:commandButton icon="ui-icon-arrowreturnthick-1-w" value="Rotate Left"
        onclick="PF('rotateAndResizeWidget').rotateLeft(90);return false;"/>
    <p:commandButton icon="ui-icon-arrowreturnthick-1-e" value="Rotate Right"
        onclick="PF('rotateAndResizeWidget').rotateRight(90);return false;"/>
    <p:commandButton icon="ui-icon-zoomin" value="Scale +"
        onclick="PF('rotateAndResizeWidget').scale(1.05);return false;"/>
    <p:commandButton icon="ui-icon-zoomout" value="Scale -"
        onclick="PF('rotateAndResizeWidget').scale(0.95);return false;"/>
</p:outputPanel>


@Named
@ViewScoped
public class ImageController implements Serializable {

    private static final long serialVersionUID = 20111020L;

    private String imageUrl;

    public ImageController() {
        imageUrl = "/resources/images/testImage1.png";
    }

    public void selectEndListener(final ImageAreaSelectEvent e) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Area selected",
                    "X1: " + e.getX1() + ", X2: " + e.getX2() + ", Y1: " + e.getY1() + ", Y2: " + e.getY2()
                                + ", Image width: " + e.getImgWidth() + ", Image height: " + e.getImgHeight());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void rotateListener(final RotateEvent e) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Image rotated",
                    "Degree:" + e.getDegree());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void resizeListener(final ResizeEvent e) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Image resized",
                    "Width:" + e.getWidth() + ", Height: " + e.getHeight());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(final String imageUrl) {
        this.imageUrl = imageUrl;
    }
}

Use Cases

Documentation

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

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.

Events (move mouse over the names to see classes)

Name	Description
rotate	fired after image rotation
resize	fired after image resizing

Attributes (move mouse over the names to see data types)

Name	Description
execute	The javascript which should be executed.
disabled	Boolean value to specify the rendering of the behavior, when set to false behavior will not be rendered.
event	The name of the event.