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>?

You mean, you want to set the aspect ratio of the crop area to 1.0? Have you checked the `` [tag documentation](http://www.primefaces.org/docs/vdl/5.2/core/primefaces-p/imageCropper.html) / [user guide](http://www.primefaces.org/documentation) / [showcase](http://www.primefaces.org/showcase/ui/multimedia/cropper.xhtml) for clues? — BalusC, Sep 25 '15 at 14:29
i really never use aspectRatio and i dont know for what is used this attribute — Michał Ziembiński, Sep 25 '15 at 14:50
If you don't know what something is for, there is always a search engine or translator — Kukeltje, Sep 25 '15 at 15:36

score 2 · Accepted Answer · answered Sep 26 '15 at 08:39

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

  ___________
 |           |
 |           |
 |___________|

Make p:imageCropper area a fixed square

1 Answers1