Input
Editors
Data
Charts & Maps
Panel & Layout
Overlay & Feedback
Media
Misc
Resources
ImageRotateAndResize
The ImageRotateAndResize widget rotates or resizes images and provides events to catch the new image values on the server side. It uses the HTML5 Canvas.
Basic Usage
The widget provides client side methods which can be called with JavaScript: rotateLeft(degree),
rotateRight(degree), resize(width,height), scale(scaleFactor) and
restoreDefaults(). The events rotate and resize are sent to the server.
Usage
<div class="card">
<h5>Basic Usage</h5>
<p>The widget provides client side methods which can be called with JavaScript: <code>rotateLeft(degree)</code>,
<code>rotateRight(degree)</code>, <code>resize(width,height)</code>, <code>scale(scaleFactor)</code> and
<code>restoreDefaults()</code>. The events <i>rotate</i> and <i>resize</i> are sent to the server.</p>
<h:form id="formBasicUsage">
<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="pi pi-replay" value="Rotate Left"
onclick="PF('rotateAndResizeWidget').rotateLeft(90);return false;"/>
<p:commandButton icon="pi pi-refresh" value="Rotate Right"
onclick="PF('rotateAndResizeWidget').rotateRight(90);return false;"/>
<p:commandButton icon="pi pi-search-plus" value="Scale +"
onclick="PF('rotateAndResizeWidget').scale(1.05);return false;"/>
<p:commandButton icon="pi pi-search-minus" value="Scale -"
onclick="PF('rotateAndResizeWidget').scale(0.95);return false;"/>
</h:form>
</div>
package org.primefaces.extensions.showcase.controller;
import java.io.Serial;
import java.io.Serializable;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.event.ImageAreaSelectEvent;
import org.primefaces.extensions.event.ResizeEvent;
import org.primefaces.extensions.event.RotateEvent;
/**
* ImageController
*
* @author Thomas Andraschko / last modified by $Author$
* @version $Revision$
*/
@Named
@ViewScoped
public class ImageController implements Serializable {
@Serial
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;
}
}