LWC Image Cropper

This component is a LWC adaptation of Croppr.js made by James Ooi with simple file upload functionality. Croppr.js version used here is modified (fixed condition racing when using larger images) and available as a forked repo here

Custom Labels

Custom Labels used in component: ImageCropperBrokenFileAltText - Showed when uploaded file is broken

ImageCropperButtonLabel - Label showed on button that is capable of croping and uploading an image

ImageCropperErrorTitle - Title of error toast

ImageCropperLabel - Label displayed over upload button

ImageCropperSuccessTitle - Toast title when upload succeeded

ImageCropperUploadSuccessMessage - Toast message when upload succeeded

Record Page properties

Configurable properties for Record Page Builder:

• Aspect ratio - Constrain the crop region to an aspect ratio.
• Max crop width - Constrain the crop region maximum width to provided value (px).
• Max crop height - Constrain the crop region maximum height to provided value (px).
• Min crop width - Constrain the crop region minimum width to provided value (px).
• Min crop height - Constrain the crop region minimum height to provided value (px).

Experience Builder properties

Configurable properties for Experience Builder:

• Record Id - Defaults to {!recordId} to provide record Id from experience site context.
• Aspect ratio - Constrain the crop region to an aspect ratio.
• Max crop width - Constrain the crop region maximum width to provided value (px).
• Max crop height - Constrain the crop region maximum height to provided value (px).
• Min crop width - Constrain the crop region minimum width to provided value (px).
• Min crop height - Constrain the crop region minimum height to provided value (px).  

 

Copyright © 2022 Filip Osiński. Released under the MIT License.