croppic

## is an image cropping jquery plugin that will satisfy your needs and much more

download v1.0.1
click here to try it

# EXAMPLES

#### MODAL

( open in modal window )

#### OUTPUT

( display url after cropping )

#### EYECANDY

( no background image )

# DOCUMENTATION

## OPTIONS

uploadUrl uploadData cropUrl cropData outputUrlId customUploadButtonId modal loaderHtml imgEyecandy options zoom options CALLBACKS METHODS

## 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

# DOWNLOAD

Download whole website
Download croppic

- NO PIXELS WERE HARMED DURING THE PRODUCTION OF THIS WEBSITE -

Visit us!