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.


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


<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;"/>
Components and more
Documentation pe:imageRotateAndResize
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
rotatefired after image rotation
resizefired after image resizing
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.0,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2021-12-10 14:32