Сделать область p:imageCropper фиксированным квадратом

Можно ли пропорционально обрезать изображение с помощью <p:imageCropper>?

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

Я бы запретил пользователям обрезать изображение только в квадратном формате:

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

Итак, с одинаковой шириной и высотой. Я хочу избежать прямоугольного формата:

   __________
  |          |
  |__________|

   or
    _____
   |     |
   |     |      
   |     |
   |_____|

Как я могу добиться этого с помощью <p:imageCropper>?


crop jsf square primefaces
person Michał Ziembiński    schedule 25.09.2015    source источник
comment
Вы имеете в виду, что хотите установить соотношение сторон кадрируемой области на 1,0? Вы проверили <p:imageCropper> документацию по тегам / руководство пользователя / витрина для подсказок?   -  person BalusC    schedule 25.09.2015
comment
я действительно никогда не использую аспектRatio, и я не знаю, для чего используется этот атрибут   -  person Michał Ziembiński    schedule 25.09.2015
comment
Спасибо друг. аспектное отношение - это то, что я ищу :)   -  person Michał Ziembiński    schedule 25.09.2015
comment
Если вы не знаете, для чего что-то нужно, всегда есть поисковик или переводчик   -  person Kukeltje    schedule 25.09.2015

Ответы (1)


arrow_upward
2
arrow_downward

Для этого можно использовать атрибут aspectRatio, который принимает double. Значение 1.0 сделает его точным квадратом.

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

  ______
 |      |
 |      |
 |______|

Соотношение сторон показывает, во сколько раз ширина должна быть больше высоты. Итак, значение меньше 1.0, например. 0.5, ширина будет в 0.5 раз больше высоты.

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

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

И значение больше 1.0, например. 1.5, ширина будет в 1.5 раз больше высоты.

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

  ___________
 |           |
 |           |
 |___________|
person BalusC    schedule 26.09.2015