Download this plugin at Code Canyon!

Usage

<script>

	// you may do multiple instances of the cropper on a single page
	// just be sure to give each a unique name
	var foo = new CROP();

	foo.init({

		// element to load the cropper into
		container: '.default',

		// image to load, accepts base64 string
		image: 'test.jpg',

		// aspect ratio
		width: 300,
		height: 300,

		// prevent image from leaking outside of container. boolean
		mask: true,

		// input[range] attributes
		zoom: {

			// slider step change
			steps: 0.01,

			// minimum and maximum zoom
			min: 1,
			max: 5

		},

		// optional preview. remove this array if you wish to hide it
		preview: {

			// element to load the preview into
			container: '.pre',

			// aspect ratio
			ratio: 1,

		}

	});

</script>

Notes: The container elements must exist for the cropper to load into.

Importing new image into existing cropper

foo.import(); // foo is the instance name

In my above example, I'm triggering the import with a onclick.

<li onclick="foo.import();">Import</li>

So you may either attach an onclick attribute to any element, that when pressed will fire the function, or you may keep JS and HTML logic seperate.

<script>

	// just apply the classname to the element instead of the onclick
	$('body').on("click", '.classname', function () { foo.import(); });

</script>

Zooming

The zoom slider will work right off the bat, however if you want to create an action that zooms to a specific point:

foo.zoom('min');	// zoom to min
foo.zoom('max');	// zoom to max
foo.zoom(2.5);	// zoom to arbitrary number

Flipping Image

foo.flip();

Rotating Image

foo.rotate();

Downloading Image

<a

	<!-- requires a unique id -->
	id="unqiueID"

	<!--
		parameters for the download() function are:
		1. image width
		2. image height
		3. filename
		4. filetype - use either 'png' or 'jpeg'
	-->
	onclick="foo.download(400, 400, 'filename', 'png', this.id);"

	href="#">Download</a>

Grabbing Base64 String & Saving Image

foo.data(200, 200, 'png'); // width, height, filetype (png or jpeg)

This will return an array that contains the width, height, image base64 string, and file type. You may use this to save the image like so:

<button class="saveimage">Save Image</button>

<script>

	$('body').on("click", '.saveimage', function () {

		$.ajax({
			type: "post",
			url: "save.php",
			data: foo.data(200, 200, 'png')
		})
		.done(function(data) {

			// do stuff after image is saved

		});

	});

</script>

Now create save.php

<?php

if($_SERVER['REQUEST_METHOD'] == "POST") {

	$img = str_replace('data:image/'.$_POST['filetype'].';base64,', '', $_POST['image']);
	$img = str_replace(' ', '+', $img);

	// logic to determine file name
	$filename = 'test';

	file_put_contents($filename . '.' . $_POST['filetype'], base64_decode($img));

}

Or if you're worried about malicious strings being sent, you may re-create the image with ImageMagick.

<?php

if($_SERVER['REQUEST_METHOD'] == "POST") {

	// location to save cropped image
	$url = 'saved.jpg';

	// remove the base64 part
	$base64 = base64_decode(preg_replace('#^data:image/[^;]+;base64,#', '', $_POST['image']));

	// create image
	$source = imagecreatefromstring($base64);

	// save image
	imagejpeg($source, $url, 100);

}

CSS

The zoom slider is input[type="range"], that's all it is. Styling it is a piece of cake.

Download this plugin at Code Canyon!