ImageCropper not working with dynamic images

[saurav]

I have a servlet which writes out an image.

Code: Select all

            FileContent file = getFile("C:/path_to_file/test.jpg");

            ByteArrayOutputStream baOut = new ByteArrayOutputStream();
            InputStream inputStream = new FileInputStream(file.getFilePath());
            int bytes = 0;
            byte[] byteFile = new byte[1024];
            while ((bytes = inputStream.read(byteFile)) != -1) { 
                baOut.write(byteFile, 0, bytes); 
            }
            inputStream.close();
            
            byte[] data = baOut.toByteArray();
            
            resp.setContentLength(data.length);
            resp.setContentType(file.getMimeType());
            
            OutputStream outputStream = resp.getOutputStream();
            outputStream.write(data);

            baOut.close();
            outputStream.close();

The servlet is mapped to "/dyn_images"

I am using the following in XHTML:

Code: Select all

            <p:imageCropper value="#{cropperBean.croppedImage}"
                image="/dyn_images/#{profile.image}.jpg"
                initialCoords="10,10,50,50"/>
            <p:commandButton value="Save"
                action="#{cropperBean.crop}"
                ajax="false">
            </p:commandButton>

After cropping on clicking the "Save" button the bean method "cropperBean.crop" is not being called at all.

If I use the same image as a static image, like "/images/test.jpg", which exists in the web folders, it works fine ... the bean gets called.

I have been using PrimeFaces for a while now, and I am glad for the JSF 2.0 support. PF rocks!

[fritteli]

Even though this is already a really old post, I'll answer it. Unfortunately it seems the ImageCropper only supports static images at the moment:
viewtopic.php?f=3&t=3418
However, there are already 2 feature requests pending:
http://code.google.com/p/primefaces/iss ... il?id=1603
http://code.google.com/p/primefaces/iss ... il?id=3751

So please go there and vote for these issues!

[cagatay.civici]

Voting is for Elite Users only, Community Issue Tracker starring is not voting but for watching.

[kukeltje]

Community Issue Tracker starring is not voting but for watching.

Ok... this is new to me... Then I'll remove all my 'votes'

Oh... and maybe Google should be asked to change the text then..

Vote for this issue and get email change notifications

[cagatay.civici]

Yes it is new, voting is offered to Elite users from now on, starring in piublic issue tracker is for watching to get updates so no need to remove your votes.

[pedrobvf]

The solution is sending the image to the server, and after that getting the image in the img.

Code: Select all

<h:form>
   <p:panel header="ImageCropper com FileUpload - QuebrandoParadigmas.com" style="width: 900px; margin: 0 auto; margin-top: 0px">
      <p:fileUpload fileUploadListener="#{indexManagedBean.sendImg}" sizeLimit="204800" auto="true" update="outputPanelUpload"/>
      <p:outputPanel id="outputPanelUpload">
         <h:panelGrid id="crop" columns="2">
             <p:imageCropper value="#{managedBean.croppedImage}" image="#{managedBean.oldImageName}" rendered="#{not empty managedBean.oldImageName}"/>
              <p:graphicImage value="#{managedBean.newImageName}"  rendered="#{not empty managedBean.newImageName}"/>
         </h:panelGrid>
         <p:commandButton id="cropButton" value="Crop" action="#{BAUTOMNG.crop()}" update="crop" icon="ui-icon-scissors" 
 		rendered="#{not empty managedBean.oldImageName}"/>
      </p:outputPanel>
   </p:panel>
</h:form>

You also need to reewrite the method "getConvertedValue" from ImageCropperRenderer from primefaces, because it cut's an URL id catch an exclamation point "?", like that:

Code: Select all

public Object getConvertedValue(FacesContext context, UIComponent component, Object submittedValue) throws ConverterException {
        String coords = (String) submittedValue;
        if(isValueBlank(coords)) {
            return null;
        }
        
        ImageCropper cropper = (ImageCropper) component;
        
        //remove query string
        String originalImagePath = cropper.getImage();
        
		String[] cropCoords = coords.split("_");
		String format = getFormat(originalImagePath);
		
		int x = Integer.parseInt(cropCoords[0]);
		int y = Integer.parseInt(cropCoords[1]);
		int w = Integer.parseInt(cropCoords[2]);
		int h = Integer.parseInt(cropCoords[3]);
		
		try {
			BufferedImage outputImage = getSourceImage(context, originalImagePath);
			BufferedImage cropped = outputImage.getSubimage(x, y, w, h);
			
			ByteArrayOutputStream croppedOutImage = new ByteArrayOutputStream();
	        ImageIO.write(cropped, format, croppedOutImage);
	        
	        return new CroppedImage(cropper.getImage(), croppedOutImage.toByteArray(), x, y, w, h);
            
		} catch (IOException e) {
			throw new ConverterException(e);
		}
}