6

Estou a tentar salvar uma imagem cortada depois de o usuário fazer o upload da imagem. O upload funciona bem e eu posso salvar a imagem cortada também, mais está a acontecer algo estranho. A imagem só é cortada e salvada se eu colocar o caminho da imagem diretamente no atributo image do componente imageCropper, algo como isso:

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

Se eu tentar pegar o nome da imagem(Eu pego o nome da imagem quando eu faço o upload) do meu managed bean o imageCropper não funciona, algo como isso:

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

Aqui está o meu código:

uploadImageCropper.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Image upload with crop</title>
</h:head>
<h:body>
    <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" />  
        </h:panelGrid>  
        <p:commandButton value="Crop" action="#{imageCropperBean.crop}" update="localCroppedImage"/>  
    </h:form> 
</h:body>

ImageCropperBean.java

@ManagedBean
@RequestScoped
public class ImageCropperBean {
private CroppedImage croppedImage;
private String currentImageName;
private String newImageName;

public ImageCropperBean() {
    setCurrentImageName("no_image.jpg");
    
}

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/");
        file.mkdirs();
        
        byte[] arquivo = event.getFile().getContents();
        String caminho = realPath + "/imagens/prof/" + event.getFile().getFileName();
        setCurrentImageName(event.getFile().getFileName());

        FileOutputStream fos = new FileOutputStream(caminho);
        fos.write(arquivo);
        fos.close();

    } catch (Exception ex) {
        System.out.println("Erro no upload de imagem" + ex);
    }
}   
public String crop() {
    if(croppedImage == null)
        return null;
    setNewImageName(getRandomImageName());
    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);
        imageOutput.close();
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }

    return null;
}

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

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

2 Respostas 2

1

Vanilson, sei que essa pergunta foi feita há mais de um mês, mas resolvi contribuir para ajudar pessoas com o mesmo problema.

A solução

Troque o escopo de @RequestScoped para @ViewScoped no managed bean e tudo funcionará.

Explicação

Seu código faz o upload da imagem em um request e um evento ajax atualiza o imageCropper em outro. Quando você atualiza o imageCropper ele tenta ler a propriedade da imagem em um novo request; nesse novo request a propriedade currentImageName terá o valor default (no_image.jpg) ao invés do valor armazenado no request anterior pelo método fileUploadAction. Usando @ViewScoped o valor armazenado será mantido entre requests uma vez que não houve navegação entre views.

Fonte: Resposta do optimus.prime à essa pergunta no fórum do PrimeFaces.

0

Caro @vanilson-lourenco, a solução mostrada abaixo não é exatamente o que você deseja pois roda no Cliente (JavaScript) mas talvez resolva seu problema.

HTML

<img id="myImage" src="https://i.stack.imgur.com/HNvh8.jpg">
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css"
      rel="stylesheet"></link>

JS

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

Veja os detalhes deste Framework ALLOYUI que usa o YUI 3 do Yahoo.

Imagem para teste: inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .