Cropping images and custom coordinates via the Upload Widget

By default, users can define an interesting area of the image they wish to upload for later transformation (such as focusing on this specific region, blurring, adding overlays, etc.). 

In addition, for some use-cases, it can make sense to crop the image using the coordinates before storing or delivering it (e.g., a profile image for social media sites).

The upload widget allows those functionalities by following the below steps. 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 -

1. Create an unsigned upload preset in your account (can be done via the account upload settings) with c_crop,g_custom as an Incoming Transformation - 
2. Include the upload preset in your widget implementation, and set the cropping parameter to "true".

That's it! Images uploaded via the widget will now be first cropped and then saved on your account.

If you'd like to allow the user to select an area of interest, that can be later used for manipulations - 

1. Create an unsigned upload preset - 
   
2. Include the upload preset in your widget implementation, and set the cropping parameter to "true".
3. Set the croppingCoordinatesMode parameter 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 - 

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 (dimensions selecting step) is reached. You can make this step mandatory, by setting the showSkipCropButton parameter to "false".

Hope you find this article helpful! Let us know in the comments below if you have any questions.