Javascript Image Cropper with Chrome

[sommeralex <al...@gmail.com>]

Hello!

I have embedded the Java Script Image Cropper Lib from
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

and it works fine.. except with google chrome. I have no idea why chrome
makes problem. How can i investigate such problems? Here is my (simplified)
code:

JAVA 


package com.airwriting.frontend.components.plugins;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Random;

import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.annotations.SessionState;
import org.apache.tapestry5.internal.services.ContextResource;
import org.apache.tapestry5.ioc.Resource;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Context;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;
import org.apache.tapestry5.upload.services.UploadedFile;

import com.myproj.frontend.helper.message.DisplayMessage;
import com.myproj.frontend.helper.message.MessageContainer;
import com.myproj.service.ConfigurationService;
import com.myproj.service.ImageService;

@Import(stylesheet = { "context:plugins/cropper/cropper.css" },
	library = {
		"${tapestry.scriptaculous}/builder.js",
		"${tapestry.scriptaculous}/dragdrop.js",
		"context:plugins/cropper/cropper.js"
})
public class Cropper {
	@SessionState
	private MessageContainer messageContainer;
	@Environmental
	private JavaScriptSupport javaScriptSupport;
	@Inject
	private ConfigurationService config;
	@Inject
	private Context context;
	@Inject
	private ComponentResources resources;
	@Inject
	private ImageService imageService;

	@Property
	@Persist
	private String tempImageName;
	@Persist
	private int tempImageWidth;
	@Persist
	private int tempImageHeight;

	@Property
	private UploadedFile imageFile;

	@Property
	private int x1;
	@Property
	private int y1;
	@Property
	private int x2;
	@Property
	private int y2;

	void afterRender(){
		if(tempImageName != null){
			float ratio = config.getUserImageRatio();
			int width = Math.round( tempImageHeight * ratio );
			int height = tempImageHeight;
			if(width > tempImageWidth){
				width = tempImageWidth;
				height = Math.round( tempImageWidth / ratio );
			}
			int x1 = 0;
			int y1 = 0;
			int x2 = 100;
			int y2 = 100;

			// TODO display a bigger preview window

			javaScriptSupport.addScript(
				"new Cropper.Img('cropper_image',"+
																					"	{"+
																					"		ratioDim:{x: 200, y : 200},"+
																					"		displayOnInit: false,"+
																					"		onEndCrop: onEndCrop,"+
																					"	}"+
																	");"
				);
		}
	}

	public void onSuccessFromImageUploadForm(){
		String[] filenameParts = imageFile.getFileName().split("\\.");
		String extension = filenameParts[filenameParts.length - 1];
		tempImageName = getRandomName() + "." + extension;
		String path = config.getContextPath() + config.getTempImageFolder() +
tempImageName;
		File copied = new File( path );
		imageFile.write(copied);
		Resource imageResource = new ContextResource(context,
config.getTempImageFolder() + tempImageName);

		// TODO remove try catches and use if statements instead
		try {
			BufferedImage image = imageService.toBufferedImage(imageResource);
			image = imageService.scaleImage(image,config.getCropperImageMaxWidth(),
config.getCropperImageMaxHeight());

			if( image.getWidth() < config.getUserThumbImageWidth() ||
image.getHeight() < config.getUserThumbImageHeight() ){
			
messageContainer.addMessage(DisplayMessage.CROPPER_IMAGE_TOO_SMALL_ERROR,
config.getUserThumbImageWidth()+"", config.getUserThumbImageHeight()+"");
				tempImageName = null;
				copied.delete();
				return;
			}

			this.tempImageWidth = image.getWidth();
			this.tempImageHeight= image.getHeight();
			imageService.saveImage(image, path, 100);
		} catch (IOException e) {
			messageContainer.addMessage(DisplayMessage.FILE_UPLOAD_TRY_AGAIN_ERROR);
			tempImageName = null;
			copied.delete();
		} catch (IllegalArgumentException e) {
		
messageContainer.addMessage(DisplayMessage.FILE_UPLOAD_INVALID_TYPE_ERROR);
			tempImageName = null;
			copied.delete();
		}
	}

	//TODO handle exception
	public void onSuccessFromImageEditForm() throws IOException {
		Resource imageResource = new ContextResource(context,
config.getTempImageFolder() + tempImageName);
		BufferedImage image = imageService.toBufferedImage(imageResource);
		image = imageService.subImage(image, x1, y1, x2, y2,
config.getUserImageWidth(), config.getUserImageHeight());

		
		//SAVE USER IMAGE
		String imageFolder = config.getContextPath() +
config.getUserImageFolder();
		File f = new File(imageFolder);
		boolean madeDirs = f.mkdirs();
		
		String imagePath = config.getContextPath() + config.getUserImageFolder() +
tempImageName;
		if(!imageService.saveImage(image, imagePath, 85) ){
			new File(imagePath).delete();
		}
		
		//SAVE THUMB USER IMAGE
		BufferedImage thumbImage = imageService.scaleImage(	image,
config.getUserThumbImageWidth(), config.getUserThumbImageHeight());
		String thumbImageFolder = config.getContextPath() +
config.getUserThumbImageFolder();
		f = new File(thumbImageFolder);
		madeDirs = f.mkdirs();
		
		
		String thumbImagePath = config.getContextPath() +
config.getUserThumbImageFolder() + tempImageName;
		if(!imageService.saveImage(thumbImage, thumbImagePath, 85) ){
			new File(thumbImagePath).delete();
		}
		
		//DELETE TEMP USER IMAGE
		File file = new File( config.getContextPath() +
config.getTempImageFolder() + tempImageName );
		file.delete();
		resources.triggerEvent("imageCropped", new Object[]{tempImageName}, null);
		tempImageName = null;
	}

	public void onSuccessFromImageEditCancelForm() {
		File file = new File( config.getContextPath() +
config.getTempImageFolder() + tempImageName );
		file.delete();
		tempImageName = null;
	}

	private String getRandomName(){
		String alphabet = "abcdefghijklmnopqrstuvwxyz0123456789";
		Random rand = new Random();
		String result = "";
		result += alphabet.charAt( rand.nextInt( alphabet.length()-10 ) );
		for (int i = 0; i < 19; i++) {
			result += alphabet.charAt( rand.nextInt( alphabet.length() ) );
		}
		return result;
	}

}


TML

<t:container	xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"
							xmlns:p="tapestry:parameter">

<t:if test="tempImageName">
	
	<t:form t:id="imageEditForm">

		<div id="cropper_preview" style="float:left; margin:8px 3px 7px
3px;"></div>
		<div style="clear:left;"></div>		
		
		
		<t:html.hidden t:id="cropper_x1" value="x1" />
		<t:html.hidden t:id="cropper_y1" value="y1" />
		<t:html.hidden t:id="cropper_x2" value="x2" />
		<t:html.hidden t:id="cropper_y2" value="y2" />
		
		<div style="float:left">
			 /img/temp/${tempImageName} 
		</div>
		
		<p class="buttonPanel"><t:submit value="Save Image" class="button"/></p>
	</t:form>
	<t:form t:id="imageEditCancelForm">
		<p class="buttonPanel"><t:submit value="Cancel" class="button"/></p>
	</t:form>

	<p:else>
		<t:form t:id="imageUploadForm">
			<p><t:upload t:id="imageFile" validate="required" /></p>
			<p class="buttonPanel"><t:submit value="Upload Image"
class="button"/></p>
		</t:form>
	</p:else>
</t:if>

</t:container>


..and my component which is showing the image:


		<div>
			<t:user.photo user="user" thumb="false" />
			<t:plugins.cropper t:id="cropper" />
		</div>

--
View this message in context: http://tapestry.1045711.n5.nabble.com/Javascript-Image-Cropper-with-Chrome-tp5713110.html
Sent from the Tapestry - User mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org