<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.
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>
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
foo.flip();
foo.rotate();
<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>
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);
}
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!