Use of Jcrop in phonegap

In phonegap, if you want to crop image then jcrop is the best plugin to use. You can define the aspect ratio in which you want to crop the image.

After getting the coordinates you need to send them to server to crop the image, because image cropping requires some server side code. You can use ImageMagik to crop the image at server side.

To access Jcrop you need to attach following 

Jcrop code to get coordinates :

 jcrop.cropImage = function(actualWidth, actualHeight) {
	console.log('in crop function');
// you need to pass the id of the img tag in $(id) to call Jcrop function
	var jcrop_api;
	$('#showPostImage img').Jcrop({
		onChange : jcrop.getCordinates,
		onSelect : jcrop.getCordinates,
		boxWidth : 400,
		boxHeight : 300,
		trueSize : [actualWidth, actualHeight],
		aspectRatio : 16 / 9,
		setSelect : [0, 0, actualWidth, actualHeight]
	}, function() {
		// Use the API to get the real image size

		jcrop_api = this;

	});

};

jcrop.getCordinates = function(c) {

	console.log("width " + c.w);
	console.log("height " + c.h);
	console.log("x " + c.x);
	console.log("y  " + c.y);

};
 

There are callback functions like when you move on the image the onChange function execute which returns the coordinates. When you select particular area on image then onSelect function executes.

On trueSize, it requires array of two items. you need to set the actual width and height of the image.

You can preselect the area for cropping when opening the image by using setSelect.

When you get the cropping coordinates, send them to server. 

On server, you need to use ImageMagick for Cropping ImageMagick is a linux software used for image management.

 it provides command line based image management  which can be implemented in any programming language.

ImageMagick Command for croppping :

	convert {full input Image Path with name} -crop {width}x{height}+{x co-ordinate}+{y coordinate} -resize 390x270! -quality 100 {full output ImagePath with name} 

Thanks