Make p:imageCropper area a fixed square

Question

Is it possible to crop image proportionally using <p:imageCropper>?

<p:imageCropper value="#{registerPetForm.croppedImage}" image="#{registerPetForm.uploadedFilename}" />

I would restrict users to crop image only in square format:

  ______
 |      |  |  |
 |      |  |  |
 |______|  V  |
 -------->    |
 _____________|

So with same width and height. I want to avoid a rectangle format:

   __________
  |          |
  |__________|

   or
    _____
   |     |
   |     |      
   |     |
   |_____|

How can I achieve this with <p:imageCropper>?

Answer 1

For that, the aspectRatio attribute can be used which takes a double. A value of 1.0 will make it an exact square.

<p:imageCropper ... aspectRatio="1.0" />

  ______
 |      |
 |      |
 |______|

The aspect ratio represents how many times the width should be of the height. So, a value less than 1.0, e.g. 0.5, will make the width to be 0.5 times of the height.

<p:imageCropper ... aspectRatio="0.5" />

  ______
 |      |
 |      |
 |      |
 |      |
 |______|

And, a value more than 1.0, e.g. 1.5, will make the width to be 1.5 times of the height.

<p:imageCropper ... aspectRatio="1.5" />

  ___________
 |           |
 |           |
 |___________|