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
aspectRatio	Aspect ratio of the selection (e.g. '1:1').
autoHide	Whether to auto-hide the selection.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
fadeSpeed	Fade speed in ms.
for	Search expression for the target image to attach the area selector to.
handles	Whether to show resize handles.
hide	Whether to hide the selection on click outside.
id	Unique identifier of the component in a namingContainer.Default is generated.
imageHeight	Image height for coordinate mapping.
imageWidth	Image width for coordinate mapping.
keyboardSupport	Whether keyboard support is enabled.
maxHeight	Maximum selection height.
maxWidth	Maximum selection width.
minHeight	Minimum selection height.
minWidth	Minimum selection width.
movable	Whether the selection is movable.
parentSelector	Parent selector for the widget.
persistent	Whether the selection is persistent.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
resizable	Whether the selection is resizable.
show	Whether to show the selection on init.
widgetVar	Name of the client side widget.
zIndex	z-index of the selection overlay.

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

Name	Description
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
for	Search expression for the target image.
id	Unique identifier of the component in a namingContainer.Default is generated.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
widgetVar	Name of the client side widget.

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

Name	Description
disabled	Disables the confirmation behavior.Default is false.
event	A String identifying the type of event the Ajax action will apply to. If specified, it must be one of the events supported by the component the Ajax behavior is being applied to. For HTML components this would be the set of supported DOM events for the component, plus "action" for Faces ActionSource components and "valueChange" for Faces EditableValueHolder components. If not specified, the default event is determined for the component. The DOM event name is the actual DOM event name (for example: "click") as opposed to (for example: "onclick").
execute	The javascript which should be executed.