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.