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