HTML markup to include the Crop canvas with an external image.
<canvas width="200" height="100" img.src="images/skiing-1.jpg" />
<script type="text/javascript" >
$('#crop').croputil( {
change:function(transform) {
$('#cropparams').val( JSON.stringify( transform))
}
});
</script>
HTML markup to include the Crop canvas with an inline image. (The b64 encoded image string is truncated)
<canvas width="200" height="100" img.src="/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCg .... " />
| parameter name | description | valid values |
|---|---|---|
| dx | Relative horizontal distance between centre of image and centre of crop area | 0.0 - 1.0 |
| dy | Relative vertical distance between centre of image and centre of crop area | 0.0 - 1.0 |
| cw | Width of crop area relative to image width | 0.0 - 1.0 |
| cw | Height of crop area relative to image height | 0.0 - 1.0 |
| a | degrees tilt of crop area | +/-45 degrees (in radians) |
The Crop Canvas is intended to be used together with a backend service to do the high quality cropping of the image. The client is only used to define the crop rectangle.
The process of uploading images is illustrated below. The editor uploads a large, high quality image, typically 2-10Mb.
The server generates thumbnail images and a work image for the applet and generates HTML for the client. The canvas tag either includes a link to the work image, or the work image directly as a byte-64 encoded string. By inlining the image, the image can be provided together with the component that renders the page. This is an advantage in some CMS's
The editor uses the Crop Canvas to select how the image will be cropped. When submitting, only the crop parameters are sent back to the server. These are (x,y) the distance between the centre of the image and the centre of the crop rectangle , the relative difference between the source and target image dimensions and how much the crop area is rotated.
The aspect ratio of the image is always preserved.
Client -> Server: Upload high quality image note right of Server: Generate light weight working image Server -> Client: Provide working image (inline in HTML) note left of Client: Perform crop using HTML Canvas Client -> Server: Send crop parameters note right of Server: Generate high quality cropped images
Example code to perform crop:
InputStream is = new FileInputStream( "sourceimage.jpg");
OutputStream os = new FileOutputStream( "resultimage.jpg");
int resultImageWidth = 100;
int resultImageHeight = -1; // calculate from width
float jpegQuality = 0.8f;
TransformParams transformParams = new TransformParams( 0.0f, // dx
0.0f, // dy
1.0f, // cw
1.0f, // ch
0.0f); // a
CropUtil.cropJpeg( is, os, transformParams, resultImageWidth, resultImageHeight, jpegQuality);
is.close();
Download javascript for HTML 5 Canvas here:
https://sourceforge.net/projects/croputils/files/jquery-croputil.zip/download
For the server side : use Maven - add the snippet below to your pom.xml:
<dependencies> <dependency> <groupId>net.sf.croputils</groupId> <artifactId>croputils</artifactId> <version>1.2</version> </dependency> </dependencies> <repositories> <repository> <id>croputils</id> <name>CropUtils Maven Repository</name> <layout>default</layout> <url>http://croputils.sourceforge.net/maven2/</url> <snapshots><enabled>true</enabled></snapshots> </repository> </repositories>
For more info, check out the project here:
svn co https://croputils.svn.sourceforge.net/svnroot/croputils/trunk/
In addition to enable cropping of images, the CropUtil class also provides an high quality method to down-scale images
Example code to perform image down-scaling:
InputStream is = new FileInputStream( "sourceimage.jpg"); OutputStream os = new FileOutputStream( "resultimage.jpg"); int resultImageWidth = 200; int resultImageHeight = -1; // calculate from width float jpegQuality = 0.8f; CropUtil.scaleJpeg( is, os, resultImageWidth, resultImageHeight, jpegQuality); is.close();
Example code to downscale and apply a fixed image dimension to an image.
CropUtil.cropJpeg( is, os, 100, -1, 0.8f);
The aspect ratio is preserved - the part of the image that doesn't fit will be cropped off. The crop is symmetrical, so the same will be cropped from the top and bottom or left and right.