Robocrop is a javascript plugin used for cropping and resizing images on client side, you can also set the ideal dimensions for your images, send them to your server via ajax or using a form post.
There are several events available through the crop so you can adapt the behavior of the plugin according to your needs. Using these events you can for example add extra data to the ajax image upload request.
Below are some examples of how to use the plugin.
With this example users cannot crop images smaller than 200px X 200px
<div class="crop-element circle" data-name="profile_picture" data-crop=">=200,>=200">
<img class="circle"/>
<input type="file"/>
</div>
You can define the ideal dimensions for your images in a simple way.
The attribute "date-crop" receives the minimum and maximum dimensions for the width and height of the cropped image.
<div class="crop-element" data-name="size_restriction" data-crop=">=200,=250">
<img/>
<input type="file"/>
</div>
Some examples:
=200,=200
>=200,>=200
>=200,=200
>=200<=400,>=250
>=250<=450,>=200<=400
Whenever the user has finished editing a picture that image will be sent to the server by ajax to be saved.
<div class="crop-element" data-name="demo_upload" data-upload="demo/auto_upload.php">
<img/>
<input type="file"/>
</div>
Demonstration: how to save the image using PHP.
<?php
if(isset($_POST['picture'])){
$picture = json_decode($_POST['picture']);
$filteredData = substr($picture->data, strpos($picture->data, ",") + 1);
$unencodedData = base64_decode($filteredData);
$folder = dirname(__FILE__).'/files/';
$fileName = $picture->name.'.'.$picture->ext;
// Save the image
$fp = fopen($folder . $fileName, "wb");
if (fwrite($fp, $unencodedData) === FALSE) {
$response = [
'status' => 'error',
'message' => 'Error occurred'
];
}else{
$response = [
'status' => 'success',
'message' => 'File saved.'
];
}
fclose($fp);
header('Content-Type: application/json');
echo json_encode($response);
}
The image data sent to the server in this example have the following json structure:
{
data: "data:image/png;base64,...",
ext: "png",
height:"200",
width:"200",
name:"demo_upload",
size:49488
}
It is possible to add a watermark in the image, first you define all your watermarks that you are going to use in your page and in each instance of the editor just inform what watermark you want to be added.
As you can see in the example a watermark called "main" was created to add the file "watermark.png" in a particular image position.
The available values for the parameter "position" are:
"top-left"
"bottom-left"
"top-right"
"center"
"bottom-right"
<div class="crop-element" data-name="watermark" data-watermark="main">
<img/>
<input type="file"/>
</div>
<script type="text/javascript">
robocrop.watermarks = {
main: {
file: './img/watermark.png',
opacity: 1,
position: "bottom-right",
margin_top: 0,
margin_right: 5,
margin_bottom: 5,
margin_left: 0
}
};
</script>
Optionally you can force the user to crop the image, this is useful when you need a image with specific dimensions.
<div class="crop-element" data-name="force_crop" data-crop="=200,=250" data-crop-required="true">
<img/>
<input type="file"/>
</div>
By default each time the user clicks in the editor a new image will be added, however it may be necessary to edit an image that is already present on the server then just add a button inside "crop-element" with the class "edit" this button will automatically load the image that is being displayed in the element <img/>
<div class="crop-element not-empty" data-name="edit_img" data-crop=">=200,>=200">
<img src="./img/demo.png"/>
<input type="file"/>
<button class="edit"><i class="fa fa-edit"></i></button>
</div>
If you add the attribute 'date-crop-open="true"' the editor will start with crop area visible.
<div class="crop-element" data-name="crop_open" data-crop-open="true" data-crop=">=250,>=300">
<img/>
<input type="file"/>
</div>
You can define the type of image that will be generated through the attribute 'date-ext=""'.
The allowed values are:
png
jpg
bmp
gif
Note: Some browsers do not have support for some of the formats listed above and in case of conflict the "png" format will be used as default.
<div class="crop-element" data-name="file_ex" data-ext="png">
<img/>
<input type="file"/>
</div>
Using the event "before uploading" you can intercept the initiation of an ajax upload request and add extra data to the request.
You also have access to an object that identifies the image that will be uploaded, so in a page with multiple images you can send specific data based on each one of them if you wish.
robocrop.events.upload.before = function(picture){
return [
{name:'token' ,value:'xyz'},
{name:'folder' ,value:'user'}
];
};
The event "end upload" as the name suggests is called at the end of each upload and you can have access to the server response for this upload.
robocrop.events.upload.end = function(response){
console.log('upload complete');
console.log(response);
};
The event "upload progress" it is called during the upload progress, using this event you can create progress bars and statistics.
robocrop.events.upload.progress = function(picture,loaded,total){
var value = Math.ceil(loaded/total) * 100;
console.log('progress', value+'%');
};
The event "apply" is called whenever the user finish editing a picture.
With this event you can for example create your own function to upload using the object "picture" accessible through this event.
robocrop.events.apply = function(picture){
console.log('picture',picture);
};