java - Primefaces:ImageCropper - 发生转换错误 - croppedImage 为空

Question

首先，我正在使用

Mojarra 2.0.4
Glassfish v.3.0.1
Primeface primefaces-2.2-1.jar

所以我有一个简单的页面会尝试裁剪图像，当我尝试单击 commandButton 以调用裁剪操作时，我在更新 Conversion Error Occur 时收到了 code>growl 消息。这是我的代码

<p:growl id="msgs" showDetail="true"/>
<h:form>
  <table cellspacing="10">
     <tr>
         <td>
             <p:imageCropper value="#{CropImage.croppedImage}" image="#{CropImage.me.profilePic}"
                                initialCoords="225,75,500" aspectRatio="1.25" />
         </td>
         <td style="vertical-align: top;">
             <h:outputText value="My Thumb Nail" styleClass="labelText"/><br/>
             <p:graphicImage value="#{CropImage.imageName}" styleClass="icon"/><br/><br/>
             <p:commandButton value="Crop" actionListener="#{CropImage.crop}" update="msgs"/>
         </td>
     </tr>
  </table>
</h:form>

这是我的 bean

@ManagedBean(name="CropImage")
@ViewScoped
public class CropImage {

@ManagedProperty(value="#{SessionBean}")
private SessionBean sessionBean;

private User me;

private CroppedImage croppedImage;

private String imageName;

private String ext;

private static final Logger logger = Logger.getLogger(CropImage.class.getName());

public CropImage() {
}

@PostConstruct
public void init(){
    me = sessionBean.getMe();
    imageName = me.getProfilePic();
    //obtain the extension
    ext = imageName.substring(imageName.lastIndexOf("."), imageName.length());
}

public String getImageName() {
    return imageName;
}

public void setImageName(String imageName) {
    this.imageName = imageName;
}

public SessionBean getSessionBean() {
    return sessionBean;
}

public void setSessionBean(SessionBean sessionBean) {
    this.sessionBean = sessionBean;
}

public User getMe() {
    return me;
}

public void setMe(User me) {
    this.me = me;
}

public CroppedImage getCroppedImage() {
    return croppedImage;
}

public void setCroppedImage(CroppedImage croppedImage) {
    this.croppedImage = croppedImage;
}

public String crop(){
    ServletContext servletContext = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();
    UUID uuid = UUID.randomUUID();
    imageName = servletContext.getInitParameter("resources") + File.separator;
    imageName += "cropped" + File.separator + uuid.toString() + ext;        
    FileImageOutputStream imageOutput;
    try {
        imageOutput = new FileImageOutputStream(new File(imageName));
        imageOutput.write(croppedImage.getBytes(), 0, croppedImage.getBytes().length);
        imageOutput.close();
    } catch (FileNotFoundException e) {
        logger.log(Level.SEVERE, e.getMessage());
    } catch (IOException e) {
        logger.log(Level.SEVERE, e.getMessage());
    }
    return null;
}
}

Answer 1

您要裁剪的图像是否显示？

<p:imageCropper>的图片属性需要是图像的相对路径。

来自 PrimeFaces 文档:

For local images, ImageCropper always requires the image path to be context relative. So to accomplish this simply just add slash (”/path/to/image.png”) and imagecropper will recognize it at %WEBAPP_ROOT%/path/to/image.png. Action url relative local images are not supported.