By default, users can define a region of interest in an image for later use, such as for cropping, blurring, adding overlays, etc.
Additionally, for some use cases it can make sense to crop the image using the coordinates before saving it to your account (e.g., a profile image for social media sites).
The upload widget allows these functionalities if you follow the steps below. Please note that in order to perform unsigned uploads via the upload widget, an unsigned upload preset is needed to be set.
If you'd like to allow the user to interactively crop the image upon upload:
- Create an unsigned upload preset in your account (can be done via the account upload settings) with
c_crop,g_customas incoming transformations: - Include the upload preset in your widget implementation, and set the
croppingparameter to "true".
That's it! Images uploaded via the widget will now first be cropped before saving to your account.
If you'd like to allow the user to select an area of interest ("custom coordinates"), that can later be used for manipulations:
- Create an unsigned upload preset:
- Include the upload preset in your widget implementation, and set the
croppingparameter to "true". - Set the
croppingCoordinatesModeparameter to either "face" or "custom".
That's it! You can now make use of the selected coordinates in a transformation with the "gravity" parameter, for example.
Below is a code snippet illustrating the above:
var myWidget = cloudinary.createUploadWidget({
cloudName: '<cloud_name>',
uploadPreset: '<preset_name>',
cropping: 'true',
croppingCoordinatesMode: 'custom'
}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
)
Note, that by default, a "Skip" button is displayed to the user when the interactive cropping step is reached. You can make this step mandatory, by setting the showSkipCropButton parameter to "false".
For more information, please refer to our Upload Widget documentation.
Comments
2 comments
Attempting to do this with a signed upload appears to result in a mismatch of signatures…
Can't seem to find any sort of documentation on this sort of implementation.
Everything works great until I add ‘cropping:true’ to the createUploadWidget
Hi Git,
Please refer to https://cloudinary.com/documentation/upload_widget#signed_uploads for the detailed instructions.
Please sign in to leave a comment.