aBrookland
commented
8 years ago Oh yes, with the changes to the process inline functionality so that croppic actually does the resize and crop in browser the server needs to be able to handle a different POST to the cropURL.
The resized and cropped image is uploaded as a data URI in the form data named croppedImage. This data URI needs to be saved as a binary file and not processed at all as it is the final cropped file.
So if processInline option is true and the processInlineFallback option is also true the server has to be able to handle all three possible routes:
- Resize and crop in browser (this is the new behaviour) - croppic POSTs back the final image as a data URI named croppedImage to the cropUrl . The server only needs to save croppedImage as a binary file and it's work is done.
- File upload in browser but resize and crop on server (this is existing behaviour) - croppic POSTs back the uncropped image as a data URI named imgUrl plus the crop data to the cropURL. The server needs to save the imgUrl as a binary file and then resize and crop it using imagemagick or whatever.
- File upload to server then resize and crop on server (this is existing behaviour) - croppic POSTs back the uncropped image as a file named img (or whatever is set in fileInputName option) to uploadUrl which returns the URL of the uploaded image. Then when cropped croppic POSTs back the URL of the uploaded image named imgUrl plus the crop data to the cropURL. The server needs to resize and crop the previously uploaded image using imagemagick or whatever.
So in this case your server side crop URL function needs to work something like this:
$imgUrl = $_POST['imgUrl'];
$input_uri = '';
$output_uri = '';
$got_input_file = FALSE;
$got_output_file = FALSE;
if(isset($_POST['croppedImage'])) {
// Final cropped image uploaded as a data URI
// so need to save the cropped image data URI as a binary file
// if any errors return error as JSON and don't continue
$output_uri = '{URL_OF_SAVED_FILE}';
$got_output_file = TRUE;
} elseif(preg_match('!^data:image/([^;]+);base64,(.+)$!', $imgUrl)) {
// Uncropped image uploaded as a data URI
// so need to save the uncropped image data URI as a binary file
// if any errors return error as JSON and don't continue
$input_uri = '{URL_OF_SAVED_FILE}';
$got_input_file = TRUE;
} else {
// Uncropped image was previously uploaded to the upload URL
$input_uri = $imgUrl;
$got_input_file = TRUE;
}
if($got_input_file) {
// need to crop the input file that is set in $input_uri
$output_uri = '{URL_OF_SAVED_CROPPED_FILE}';
$got_output_file = TRUE;
}
if(!$got_output_file) {
// No output file so return an error as JSON and don't continue
}
// cropped file has been created and saved to server so return success as JSON
frauschneize
smithead123
MacGyer
BeDataAnalyst
hanzouti
Hi,
I've used your script as part of a solution to provide a widget for users to provide a passport photo for an ID card.
I've had to add some extra config options and additions to get it working how we needed so I thought I'd supply our modified version for you to look at and use anything you want. I've also reformatted and added missing braces etc to pass JSHint linting.
We've tested successfully on IE8, IE9, IE10, IE11 and Edge (all Win only) plus Firefox (Win and Mac), Chrome (Win, Mac, Android, iPhone and iPad), Safari (Mac, iPhone and iPad).
Sorry we've not had time to fork the project and provide proper atomic commits and generate pull requests which would've made your life easier but we've been working to a tight deadline.
Modifications:
Current version (1.5): croppic.js.txt