PrimeFaces Extensions Showcase

ImageRotateAndResize

The widget provides client side methods which can be called with Javascript.
Following methods can be used:

rotateLeft(degree) - Rotates the image to the left direction.
rotateRight(degree) - Rotates the image to the right direction.
resize(width,height) - Resizes the image to the given width and height.
scale(scaleFactor) - Scales the image with the given factor.
restoreDefaults() - Restores the default image.

Source

XHTML page
Managed bean


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

<h:graphicImage id="myImage" value="/resources/images/testImage1.png" />

<pe:imageRotateAndResize id="rotateAndResize" for="myImage" widgetVar="rotateAndResizeWidget">
    <p:ajax event="rotate" listener="#{imageController.rotateListener}" update="growl"/>
    <p:ajax event="resize" listener="#{imageController.resizeListener}" update="growl"/>
</pe:imageRotateAndResize>

<br/>

<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;"/>


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

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.