Response title
This is preview!
CROP URL
Path to your img crop proccessing file.
JS
var cropperOptions = {
cropUrl:'path_to_your_image_cropping_file.php'
}
var cropperHeader = new Croppic('yourId', cropperOptions);
You will be receiving the following data via AJAX POST method as multipart/form-data;
(note that ajax is limited to same domain requests)
imgUrl // your image path (the one we recieved after successfull upload)
imgInitW // your image original width (the one we recieved after upload)
imgInitH // your image original height (the one we recieved after upload)
imgW // your new scaled image width
imgH // your new scaled image height
imgX1 // top left corner of the cropped image in relation to scaled image
imgY1 // top left corner of the cropped image in relation to scaled image
cropW // cropped image width
cropH // cropped image height
cropData:{ "dummyData":1, "dummyData2":"text" }
That plugin page documentation has all example available.
http://www.croppic.net/
uploadUrl:'path_to_your_image_proccessing_file.php'
Is the path to file which will upload the original image to server and the
after upload you need to return json data like
{
"status":"success",
"url":"path/img.jpg",
"width":originalImgWidth,
"height":originalImgHeight
}
for successful image upload or if any error then like
{
"status":"error",
"message":"your error message text"
}
After plugin received success response from your JSON, it picked image
from your server, then path needs to be send as url parameter in your
image upload ajax response
Then plugin automatically sets that image for cropping.
For posting cropped image to server you need to mention that file path
as
cropUrl:'path_to_your_image_cropping_file.php'
They have a nice documentation, you need to read it carefully and set
it out.
Even they provided sample PHP code for upload and cropping as well.
© 2013 jQuery Foundation
Sponsored by and others.