使p:imageCropper区域成为固定的正方形

时间:2015-09-25 14:25:06

标签: jsf primefaces crop square

是否可以使用<p:imageCropper>按比例裁剪图像?

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

我会限制用户仅以方格格式裁剪图像:

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

所以宽度和高度相同。我想避免使用矩形格式:

   __________
  |          |
  |__________|

   or
    _____
   |     |
   |     |      
   |     |
   |_____|

如何使用<p:imageCropper>实现此目的?

1 个答案:

答案 0 :(得分:2)

为此,可以使用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" />
  ___________
 |           |
 |           |
 |___________|