mharray/gwt-cropper

GWT widget, that allows you to select an area of a picture and get the coordinates of this selection

• Official website: http://gwt-cropper.co.uk/

GWT Cropper is a widget for Google Web Toolkit, that allows you to select an area of a picture and get the coordinates of this selection. It is useful, if you want to crop a picture on the server side.

Demo

Try the working demo:

• Simple cropper: demo
• Cropper with preview: demo

Get started

The plugin is very simple. In order to use it, you should follow next steps:

1. Import plugin to your project

If you use Maven, you can add this dependency to your POM:

      <dependency>
            <groupId>com.googlecode.gwt-cropper</groupId>
            <artifactId>gwt-crop</artifactId>
            <version>0.5.5</version>
      </dependency>

If you need JAR files, you can download them from the GWT-Cropper Maven Repository page. Just select any link jar, javadoc.jar either sources.jar next to the each version to download an archive you need.

2. Declare the plugin in your project

Add this line to your .gwt.xml file:

      <!-- Inherit the GWT-Cropper -->
      <inherits name='com.google.code.gwt.crop.GWTCropper'/>

3. Use it in your project

Add GWT Cropper to any panel in your code. Simple example (on Java):

	  final GWTCropper crop = new GWTCropper("url/to/your/uncropped/image.jpg");
	  crop.setAspectRatio(1); // square selection (optional)
	  panel.add(crop);

Or sample code in .ui.xml (since v. 0.5.0):

	  <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
			 xmlns:g='urn:import:com.google.gwt.user.client.ui'
			 xmlns:my="urn:import:com.google.code.gwt.crop.client">

	  <my:GWTCropper  ui:field="cropper"
	           aspectRatio="1.5" imageURL="url/to/your/uncropped/image.jpg" />

Tablets

GWT Cropper supports tablets since v.0.4.0. Tested on the IPad (2, 3, 4, mini), several Android devices and since v.0.4.1 the widget supports also Win8 tablets (including Microsoft Surface).

Documentation

The documentation is pretty short, but in any case, please, refer to Wiki-page or JavaDoc for details.

Take a look at the TipsAndTricks Tips & tricks page to see the most common issues.

Changelog

• 0.5.5 Small bugfixes (Pull request 26, Pull request 27)
• 0.5.4 Corrected gathering of the selection coordinates. Pull request 24. Thanks to @thoepfner !
• 0.5.3.1 Now you can scale whole cropper widget and the selection will be functioning accordingly Pull request 23. Thanks @enginer!
• 0.5.2 New Constrained Cropper Preview widget was added. Thanks to @thoepfner
• 0.5.1 The harvesting of the selection position is calibrated.
• 0.5.0 The new Preview widget is added (issue16). Now you can declare GWT Cropper in ui.xml files with UiBuilder (issue17). Created new Wiki page [HowToUsePreviewWidget How to use Preview widget].
• 0.4.6 The cropper is adjusted for using with GWT-Bootstrap project (issue14); bug fixes (issue11, issue12)
• 0.4.5 Removed hardcoded minimal selection size value (issue9); StyleResource was changed to public in order to give developers an opportunity to overwrite default CSS styles (issue10, read Wiki tutorial How to apply custom styles)
• 0.4.4 Added method setSize(int width, int height) (issue7)
• 0.4.2, 0.4.3: Added couple of public methods to set up initial size and position for the selection (issue6, issue8)
• 0.4.1: Resolved issues with Internet Explorer browser and Win8 tablets. Tested on IE version 7-10 and Microsoft Surface tablet. (issue4)
• 0.4.0: Added tablet support. Tested on iPad 2,3 and a handful of Android devices. (issue1)
• 0.3.5: Fixed bug with "sticky" edges

Contribution

Dear colleagues, GWT Cropper is an open source project, so any contribution is highly appreciated. If you wish to send me any bugfix, improvement or new feature, please create a new issue in the Issue Tracker and send the pull request. Thanks!