Primefaces: ImageCropper - Conversion Error Occur - croppedImage is null

Question

First of all, I am using

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

So I have a simple page that will try to crop an image, and when I try to click on a commandButton to invoke a crop action, I got this Conversion Error Occur when I update my growl message. Here is my code

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

And here is my 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

Does your image to be cropped show ?

The image attribue of <p:imageCropper> needs to be a relative path to the image.

From PrimeFaces documentation:

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.

Answer 2

I had this same issue and came to realize it was simply the use of File.separator in the string used for my ImageCropper.image attribute. I had used it to created a path to place an uploaded image, then reused that same string.

So the problem line:

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

Generated uploads\\filename.jpg . the p:imageCropper displayed my images just fine, but I received the {0} Conversion Error Occur error when trying to crop .

I changed it to the following to resolve the issue:

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

You may also find other characters such as spaces in your ImageCropper.image attribute will cause this error.

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