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;
    }
}