Primefaces：ImageCropper-发生转换错误-croppedImage为null

Question

首先，我正在使用

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

因此，我有一个简单的页面，它将尝试裁剪图像，并且当我尝试单击commandButton调用裁剪操作时，在更新我的growl消息时Conversion Error Occur此Conversion Error Occur 。 这是我的代码

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

这是我的豆子

@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文档中：

对于本地图像，ImageCropper始终要求图像路径是上下文相关的。 因此，只需添加斜杠（“ /path/to/image.png")，imagecropper便会在％WEBAPP_ROOT％/ path / to / image.png处识别它。 不支持操作网址相对本地图像。

Answer 2

我遇到了同样的问题，并且意识到这仅仅是在ImageCropper.image属性的字符串中使用File.separator 。 我用它来创建放置上载图像的路径，然后重用相同的字符串。

所以问题所在：

String uploadedPhotoPath = "uploads"  + File.separator + uploadedFile.getFileName();

生成的uploads\\filename.jpg 。 p:imageCropper displayed可以很好地p:imageCropper displayed我的图像，但是{0} Conversion Error Occur error when trying to crop收到{0} Conversion Error Occur error when trying to crop 。

我将其更改为以下内容以解决此问题：

String uploadedPhotoPath = "uploads/"+ uploadedFile.getFileName();

您可能还会在ImageCropper.image属性中找到其他字符，例如空格，将导致此错误。

Answer 3

use folder name as resources to store images and use this  code and you must use folder     name as "resources" because it will store cropped image in build and will not be able to fetch from it
index.xhtml
<h:form>
<p:growl id="msgs" showDetail="true"/>
<h:panelGrid columns="2">  
<p:imageCropper value="#{imageCropperBean.croppedImage}" image="/resources/barca/bus.jpg"          initialCoords="225,75,300,125"/>  
<p:graphicImage id="local" value="/resources/barca/#{imageCropperBean.newImageName}.jpg"/>  
</h:panelGrid> 
<p:commandButton id="xfg" value="Crop"  action="#{imageCropperBean.crop()}" update="local" />
</h:form>
and bean code is 
package com.mangium;
import org.primefaces.model.CroppedImage;
import java.io.File;  
import java.io.FileNotFoundException;  
import java.io.IOException;  
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;  
import javax.imageio.stream.FileImageOutputStream;  
import javax.servlet.ServletContext;
@ManagedBean
@RequestScoped
public class ImageCropperBean {

@ManagedProperty(value = "#{croppedImage}")
private CroppedImage croppedImage;  

private String newImageName;  

public CroppedImage getCroppedImage() {  
    return croppedImage;  
}  

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

public String crop() {  

if(croppedImage == null)  
        return null;  


setNewImageName(getRandomImageName());  

ServletContext servletContext = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContex();

String newFileName = servletContext.getRealPath("")+ File.separator + "resources" +  File.separator  + "barca" + File.separator + getNewImageName() +".jpg";

FileImageOutputStream imageOutput;  
try {  

imageOutput = new FileImageOutputStream(new File(newFileName));  

imageOutput.write(croppedImage.getBytes(), 0, croppedImage.getBytes().length); 

imageOutput.close();  
} catch (FileNotFoundException e) {  
e.printStackTrace();  
} catch (IOException e) {  
e.printStackTrace();  
}  
return null;  
}  
private String getRandomImageName() {  
int i = (int) (Math.random() * 100000);  
return String.valueOf(i);  
}  
public String getNewImageName() {  
return newImageName;  
}  
public void setNewImageName(String newImageName) {  
this.newImageName = newImageName;  
}  
}