INITIALISATION

Simplest implementation. Beware that you must provide width and height of the container.

JS

		
		var cropperHeader = new Crop('yourId');
				

HTML

		
		<div id="yourId"></div>
				

CSS

		
		#cropContainerHeader {
			width: 200px;
			height: 150px;
			position:relative; /* or fixed or absolute */
		}
				

---

UPLOAD URL

Path to your img upload proccessing file.

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			uploadUrl:'path_to_your_image_proccessing_file.php'
		}
				

You will be receiving the image file via AJAX POST method as multipart/form-data;
(note that ajax is limited to same domain requests)

Download php example file

After successful image saving, you must return the following json.
( image width and height required for limiting max zoom, so images dont come out blurry. )

		
			{
				"status":"success",
				"url":"path/img.jpg",
				"width":originalImgWidth,
				"height":originalImgHeight
			}
				

In case of error response

		
			{
				"status":"error",
				"message":"your error message text"
			}
				

---

UPLOAD DATA

Additional data you want to send to your image upload proccessing file

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			uploadUrl:'path_to_your_image_proccessing_file.php',
			uploadData:{
				"dummyData":1,
				"dummyData2":"text"
			}
		}
				

---

CROP URL

Path to your img crop proccessing file.

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			cropUrl:'path_to_your_image_cropping_file.php'
		}
				

You will be receiving the following data via AJAX POST method as multipart/form-data;
(note that ajax is limited to same domain requests)

	imgUrl 		// your image path (the one we recieved after successfull upload)
				
	imgInitW  	// your image original width (the one we recieved after upload)
	imgInitH 	// your image original height (the one we recieved after upload)

	imgW 		// your new scaled image width
	imgH 		// your new scaled image height

	imgX1 		// top left corner of the cropped image in relation to scaled image
	imgY1 		// top left corner of the cropped image in relation to scaled image

	cropW 		// cropped image width
	cropH 		// cropped image height
			

Download php example file

After successful image saving, you must return the following json.
( image width and height required for limiting max zoom, so images dont come out blurry. )

		
			{
				"status":"success",
				"url":"path/croppedImg.jpg"
			}
			

In case of error response

		
			{
				"status":"error",
				"message":"your error message text"
			}
				

---

CROP DATA

Additional data you want to send to your image crop proccessing file

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			customUploadButtonId:'path_to_your_image_proccessing_file.php',
			cropData:{
				"dummyData":1,
				"dummyData2":"text"
			}
		}
				

---

OUTPUT URL

After successful image cropping, cropped img url is set as value for the input containing the outputUrlId

HTML

		
		<input type="text" id="myOutputId">
				

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			outputUrlId:'myOutputId'
		}
				

---

CUSTOM UPLOAD BUTTON

If you want a custom upload img button, just like in the first example here

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			customUploadButtonId:'myDivId'
		}
				

---

MODAL

If you want to open the cropping in modal window (default is false)

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			modal:true
		}
				

---

LOADER HTML

If you want to open the cropping in modal window (default is false)
THE WRAPPING DIV MUST CONTAIN "LOADER" CLASS

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			loaderHtml:'<img class="loader" src="loader.png" >'
		}
				

---

IMG EYECANDY

Transparent image showing current img zoom
TIP: to prevent layout breaking, set the parent div of the cropper to "overflow":"hidden"

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			imgEyecandy:true,
			imgEyecandyOpacity:0.2
		}
				

---

ZOOMING

doubleZoomControls adds two extra zoom controls for 10*zoomFactor zoom (default is true)

zoomFactor zooms the image for the value in pixels (default is 10)

JS

		
		var cropperHeader = new Crop('yourId', cropperOptions);
					
		var cropperOptions = {
			zoomFactor:10,
			doubleZoomControls:true
		}
				

---

CALLBACKS

Some callbacks ( open your console and watch the output as you mess arround with the example cropper )

JS

		
	var cropperHeaderOptions = {
		onBeforeImgUpload: 	function(){ console.log('onBeforeImgUpload') },
		onAfterImgUpload: 	function(){ console.log('onAfterImgUpload') },
		onImgDrag:		function(){ console.log('onImgDrag') },
		onImgZoom:		function(){ console.log('onImgZoom') },
		onBeforeImgCrop: 	function(){ console.log('onBeforeImgCrop') },
		onAfterImgCrop:		function(){ console.log('onAfterImgCrop') }
	}
			

---

METHODS

JS

		
		var cropper = new Crop('yourId', cropperOptions);
		
		cropper.destroy() 	// no need explaining here :) 
		cropper.reset() 	// destroys and then inits the cropper