Save cropped image after upload

Posted on

Question :

I’m trying to save a cropped image after the user uploads the image. The upload works fine and I can save the cropped image too, but something strange is happening. The image is only trimmed and saved if I put the image path directly into the image attribute of the imageCropper component, something like this:

<p:imageCropper value="#{imageCropperBean.croppedImage}" image="/imagens/prof/imageName.jpg" initialCoords="225,75,300,125" id="imageCropper"/>

If I try to get the name of the image (I get the image name when I upload it) from my managed bean, the imageCropper does not work, something like this:

<p:imageCropper value="#{imageCropperBean.croppedImage}" image="/imagens/prof/#{imageCropperBean.currentImageName}" initialCoords="225,75,300,125" id="imageCropper"/>

Here is my code:


    <title>Image upload with crop</title>
    <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{imageCropperBean.fileUploadAction}" update="imageCropper" />
        <h:panelGrid columns="2">  
            <p:imageCropper value="#{imageCropperBean.croppedImage}" image="/imagens/prof/#{imageCropperBean.currentImageName}" initialCoords="225,75,300,125" id="imageCropper"/>  
            <p:graphicImage id="localCroppedImage" value="/imagens/prof/#{imageCropperBean.newImageName}.jpg" />  
        <p:commandButton value="Crop" action="#{imageCropperBean.crop}" update="localCroppedImage"/>  

public class ImageCropperBean {
private CroppedImage croppedImage;
private String currentImageName;
private String newImageName;

public ImageCropperBean() {


public void fileUploadAction(FileUploadEvent event) {
    try {
        ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
        HttpServletResponse response = (HttpServletResponse) externalContext.getResponse();

        FacesContext aFacesContext = FacesContext.getCurrentInstance();
        ServletContext context = (ServletContext) aFacesContext.getExternalContext().getContext();

        String realPath = context.getRealPath("/");

        File file = new File(realPath + "/imagens/prof/");

        byte[] arquivo = event.getFile().getContents();
        String caminho = realPath + "/imagens/prof/" + event.getFile().getFileName();

        FileOutputStream fos = new FileOutputStream(caminho);

    } catch (Exception ex) {
        System.out.println("Erro no upload de imagem" + ex);
public String crop() {
    if(croppedImage == null)
        return null;
    ServletContext servletContext = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();
    String newFileName = servletContext.getRealPath("") + File.separator + "imagens" + File.separator + "prof" + File.separator + getNewImageName() + ".jpg";

    FileImageOutputStream imageOutput;
    try {
        imageOutput = new FileImageOutputStream(new File(newFileName));
        imageOutput.write(croppedImage.getBytes(), 0, croppedImage.getBytes().length);
    } catch (FileNotFoundException e) {
    } catch (IOException e) {

    return null;

public String getRandomImageName() {
    int i = (int) (Math.random() * 100000);

    return String.valueOf(i);
//getter and setters


Answer :

Vanilson, I know this question was asked more than a month ago, but I decided to contribute to help people with the same problem.

The solution

Change the scope of @RequestScoped to @ViewScoped in the managed bean and everything will work.


Your code does the upload of the image in a request and a ajax event updates the imageCropper into another. When you update imageCropper it tries to read the image property in a new request ; in this new request property, the currentImageName property will have the value default ( no_image.jpg ) instead of the value stored in the request %. Using fileUploadAction the stored value will be kept between requests since there was no navigation between views .

Source: Response from à this question in the PrimeFaces forum.


Dear @ vanilson-lourenco, the solution shown below is not exactly what you want because it runs on the Client (JavaScript) but might solve your problem.


<img id="myImage" src=""><scriptsrc=""></script>
<link href=""


var myCropper = {};
YUI().use('aui-image-cropper', function(Y) {
    myCropper = new Y.ImageCropper({
        cropHeight: 200,
        cropWidth: 200,
        srcNode: '#myImage',
        x: 50,
        y: 50
// seu código JS adicional

See the details of this Framework ALLOYUI that uses Yahoo’s YUI 3.

Test Image:


Leave a Reply

Your email address will not be published. Required fields are marked *