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.
The image can’t be dragged past the edges of the crop silhouette so that an undersized selection is impossible.
Initial Position
Photo Repositioned for Cropping
Initial version
Avatar