1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="dependencies/bootstrap-3.2.0/css/bootstrap.min.css"> <!--for bootstrap theme-->
<script src="dependencies/jquery/jquery-1.11.1.min.js"></script>
<script src="dependencies/bootstrap-3.2.0/js/bootstrap.min.js"></script><!--for bootstrap theme-->
<script src="dependencies/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
<script src="jquery.picture.cut/src/jquery.picture.cut.js"></script>
2. HTML
<div id="container_image"></div>
3. JAVASCRIPT
$("#container_image").PictureCut({
InputOfImageDirectory : "image",
PluginFolderOnServer : "/jquery.picture.cut/",
FolderOnServer : "/uploads/",
EnableCrop : true,
CropWindowStyle : "Bootstrap"
});
The PluginFolderOnServer and FolderOnServer property need to be defined, they will be better detailed in the next topic, it is important to know that the directory defined in FolderOnServer need to be writable 777
4. OPTIONS
Extensions: ["jpg", "png", "gif"],
InputOfImageDirectory: "image",
InputOfImageDirectoryAttr: {},
InputOfFile: "",
ActionToSubmitUpload: "",
ActionToSubmitCrop: "",
FolderOnServer: "",
ThumbFolderOnServer: "",
DataPost: {},
DefaultImageButton: "",
EnableCrop: false,
EnableResize: true,
MinimumWidthToResize: 1024,
MinimumHeightToResize: 630,
MaximumSize: 1024,
EnableMaximumSize: false,
PluginFolderOnServer: "",
CropWindowStyle: "bootstrap",
ImageNameRandom: true,
EnableButton: false,
ImageButtonCSS: {
border: "1px #CCC solid",
width: 170,
height: 150
},
CropModes: {
widescreen: true,
letterbox: true,
free: true
},
CropOrientation: true,
UploadedCallback: function(response) {}
5. HOW WORKS THE SERVER SIDE
Upload
Server Side implementation upload
src/php/upload.php
require_once('core/PictureCut.php');
try {
$pictureCut = PictureCut::createSingleton(); //creating an singleton instance of the class PictureCut
if($pictureCut->upload()){ //calling the method that will upload
print $pictureCut->toJson(); //print the data to the plugin (client side).
} else {
print $pictureCut->exceptionsToJson(); //print exceptions if the upload fails
}
} catch (Exception $e) {
print $e->getMessage(); //print exceptions instance.
}
Object submitted to upload.php
{
[inputOfFile] : [Files]
request : [String],
inputOfFile : [String],
enableResize : [Boolean],
minimumWidthToResize : [Integer],
minimumHeightToResize : [Integer],
folderOnServer : [String],
imageNameRandom : [Boolean],
maximumSize : [Integer],
enableMaximumSize : [Boolean]
}
Object returned to the plugin from upload.php
{
status : [Boolean],
currentFileName : [String],
currentWidth : [Integer],
currentHeight : [Integer],
currentFileSize : [Integer],
request : [String]
}
Crop
Server Side implementation crop
src/php/crop.php
require_once('core/PictureCut.php');
try {
$pictureCut = PictureCut::createSingleton(); //creating an singleton instance of the class PictureCut
if($pictureCut->crop()){ //calling the method that will cut
print $pictureCut->toJson(); //print the data to the plugin (client side).
} else {
print $pictureCut->exceptionsToJson(); //print exceptions if the upload fails
}
} catch (Exception $e) {
print $e->getMessage(); //print exceptions instance.
}
Object submitted to crop.php
{
currentFileName : [String],
currentWidth : [Integer],
currentHeight : [Integer],
currentFileSize : [Integer],
request : [String],
folderOnServer : [String],
inputOfFile : [String],
maximumSize : [Integer],
enableMaximumSize : [Boolean],
toCropImgX : [Integer],
toCropImgY : [Integer],
toCropImgW : [Integer],
toCropImgH : [Integer]
}
Object returned to the plugin from crop.php
{
status : [Boolean],
currentFileName : [String],
currentWidth : [Integer],
currentHeight : [Integer],
currentFileSize : [Integer],
request : [String]
}
JS Tutorial
