INITIALISATION

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

JS

		
		var cropperHeader = new Croppic('yourId');
				

HTML

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

CSS

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

---

UPLOAD URL

Path to your img upload proccessing file.

JS

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

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 cropperOptions = {
			uploadUrl:'path_to_your_image_proccessing_file.php',
			uploadData:{
				"dummyData":1,
				"dummyData2":"text"
			}
		}
		
		var cropperHeader = new Croppic('yourId', cropperOptions);
					
		
				

---

CROP URL

Path to your img crop proccessing file.

JS

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

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 cropperOptions = {
			customUploadButtonId:'path_to_your_image_proccessing_file.php',
			cropData:{
				"dummyData":1,
				"dummyData2":"text"
			}
		}
		
		var cropperHeader = new Croppic('yourId', cropperOptions);
					
		
				

---

Preload Image

Load an Image which is already on the Server

JS

		
				
		var cropperOptions = {
			cropUrl:'path_to_your_image_cropping_file.php',
			loadPicture:'path-to-your-image'
		}
		
		var cropperHeader = new Croppic('yourId', cropperOptions);
					
		
				

---

Controls

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)
rotateControls adds two extra rotate controls for left and right rotation (default is true)
rotateFactor rotates the image for the value(default is 5)

JS

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

---

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 cropperOptions = {
			outputUrlId:'myOutputId'
		}		
		
		var cropperHeader = new Croppic('yourId', cropperOptions);
	
				

---

CUSTOM UPLOAD BUTTON

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

JS

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

---

MODAL

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

JS

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

---

LOADER HTML

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

JS

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

---

Process Inline

If you want to handle the Initial Fileupload in Javascript(Filereader) rather then on Server side (default is false)
NOT ALL BROWSERS SUPPORT THE FILEREADER API: EXAMPLE IE10+ IS SUPPORTED

JS

		7
				
		var cropperOptions = {
			processInline:true,
		}
		
		var cropperHeader = new Croppic('yourId', cropperOptions);
					
						
				

---

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 cropperOptions = {
			imgEyecandy:true,
			imgEyecandyOpacity:0.2
		}
		
		var cropperHeader = new Croppic('yourId', cropperOptions);					
		
				

---

CALLBACKS

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

JS

		
		var cropperOptions = {
			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') },
			onReset:		function(){ console.log('onReset') },
			onError:		function(errormsg){ console.log('onError:'+errormsg) }
		}
	
		var cropperHeader = new Croppic('yourId', cropperOptions);	
			

---

METHODS

JS

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