Allows the user to select, upload, zoom, and crop an image. Can also be used to edit a previously uploaded image.
Usage Guidelines
Use this component any time a user needs to edit an image they are uploading.
Features
Users may select an image using a file input, drag and drop, or another method that works best in the consuming context. Once a file is selected, the image cropper modal should appear.
Using a custom file input.
Using the default file input.
Either the file input or a custom trigger will ultimately open a file chooser.
A photo may be scaled from 50% to 200% in size by clicking and dragging the slider towards the bottom of the Edit Photo modal.
Initial Scale
Increased Scale
The user may also click on their photo and drag it in order to reposition the photo around the silhouette for proper cropping.
Initial Position
Photo Repositioned for Cropping
The final step is to crop the uploaded photo by pressing the Save button. The portion of the photo in the open square of the silhouette will be set as the user’s avatar.
Pressing Save Crops the Photo
Avatar