Image Crop Documentation v3

Thanks for purchasing! If you have any questions that are beyond the scope of this documentation, please do feel free to contact me.

If you like this template, please remember to rate it on Themeforest - it really helps to know what people think.

Author: Rabona • Created: 11 August 2013 • Last Updated: 23 January 2015

Install

There is nothing to install. :)

How does it work?

To create a new instance of the cropper, begin with adding the following HTML to your page:

line 10 & 38: Make sure these container elements exist.
line 26-30: These settings get applied to the input[range] element.
line 35: If you want to remove the preview, you may either delete this array or write 'preview: false'.

<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',

			// preview dimensions
			width: 200,
			height: 200

		}

	});

</script>

Next, make sure you've added the .js and .css files into the header:

<link rel="stylesheet" type="text/css" href="crop.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="crop.js"></script>

Putting it all together

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="crop.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<script src="crop.js"></script>
</head>

<body>

<div class="default"></div>
<div class="pre"></div>

<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',

			// preview dimensions
			width: 200,
			height: 200

		}

	});

</script>

</body>
</html>

Or perhaps you don't have an image ready to initiate the cropper, and would like the user to supply one first:

<button onclick="newCrop();">Import Image</button>
<div class="loadInto"></div>

<script>

	function newCrop() {

		$('body').append('');
		$('#importIMG').click();

		NEWoFReader = new FileReader(), rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;

		$('#importIMG').change(function() {

			if(document.getElementById("importIMG").files.length === 0) return;
			var oFile = document.getElementById("importIMG").files[0];
			if(!rFilter.test(oFile.type)) return;
			NEWoFReader.readAsDataURL(oFile);

			$('#importIMG').remove();

		});

		NEWoFReader.onload = function (oFREvent) {

			// clear load into element
			$('.loadInto').html('');

			bar = new CROP();

			bar.init({

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

				// image to load, accepts base64 string
				image: oFREvent.target.result, // <-- this is the returned image string

				// aspect ratio
				width: 200,
				height: 200,

				// 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
				preview: false

			});

		};

	}

</script>

Functions

Importing new image into existing cropper

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

You may trigger the function with an onclick, that is applied to an element.

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

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>

Saving image to server

Grabbing the base64 string

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 Customisation

You may edit the cropper's CSS from crop.css, I've commented the sections so it's relatively simple.

If you want to style a specific cropper:

/* remember in the example above, the container: '.default' */
.default .cropMain {
	...
}

Mask color - Change the faded white border around the image:

.cropMain .crop-container:after {
    box-shadow: inset 0 0 0 40px red;
}

Rotate the slider:

div[data-imgcrop] input[type="range"] {
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
}

To change the slide progress color (the yellow), go into crop.js and look for "// zoom slider progress color" line: 209.

// #eee is the background color
// red would be the new yellow
style = "background: linear-gradient(to right, red " + pos + "%, #eee " + (pos + 0.1) + "%);";

A good guide for learning CSS can be found here.

Notes

If you require further support, shoot me an email from my CodeCanyon profile page.