Question

首先，我正在使用

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

所以我有一个简单的页面会尝试裁剪图像，当我尝试单击commandButton来调用裁剪操作时，我在更新Conversion Error Occur消息时得到了这个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>

这是我的豆子

@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％/路径/到/ image.png。动作网址是相对的本地图像不支持。

Answer 2

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

所以问题在于：

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

生成uploads\filename.jpg。 p:imageCropper displayed我的图片很好，但我收到了{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;  
}  
}

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

3 个答案: