Cropping images

The imageCropper component provides image-cropping functionality by allowing us to crop a certain region of an image, which could either be a local image or an external image. After cropping, a new image is created. It contains the cropped region and it is assigned to a CroppedImage instance.

How to do it...

The org.primefaces.model.CroppedImage class belongs to the PrimeFaces API, and the structure of the class is as follows:

public class CroppedImage {
  String originalFilename;
  byte[] bytes;
  int left;
  int top;
  int width;
  int height;
}

A simple definition of the image cropper for cropping a local image would be as shown in the following code line. The value of the component is bound with an instance of CroppedImage.

<p:imageCropper value="#{imageCropBean.croppedImageSimple}"
  image="/resources/images/crop/primefaces.jpg" />

When hovered over the image, the cursor of the mouse will change to crosshairs for making the crop region selection. When the region is selected...