The ImageChooser class allows you to select an image from your local computer, and crop it in Web AppBuilder.
ImageChooser receives the following parameters as constructor arguments:
| Property | Description |
|---|---|
cropImage | Boolean. Default is true. Determines whether to enable crop image capability. Only applies to developer edition. |
displayImg | HTML Image Element. Default is null. An image element previews the selected image or cropped image. |
showSelfImage | Boolean. Determines whether to display the selected image or cropped image in ImageChooser. If false, it sets an image element to the displayImg property for preview. |
defaultSelfImg | String. Sets the src attribute of the self image. |
label | String. When ;label is set, ImageChooser displays as a button. The label and showSelfImage properties are mutually exclusive. |
showTip | Boolean. Determines whether to show tips. |
goldenWidth | Number. Ideal width of the image. |
goldenHeight | Number. Ideal height of the image. The cropped image rate uses the rate of goldenWidth/goldenHeight. |
format | String[]. Types of images that can be selected. Currently it only supports image/png, image/gif, and image/jpeg. |
When you click OK, the ImageChooser sends a request to the server with the following parameters:
| Key | Description |
|---|---|
imageData | Base64. The base64 string of the selected image. |
imageDisplaySize | String. The width and height of the image.  |
cropRectangle | String. The width, height, and offset of the crop rectangle to the image.  |
Example:
Send parameters to the server.
{
cropRectangle:”data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYAB......”,
imageDisplaySize:”611,458”,
cropRectangle:”335,335,97,76”
}Success
{
success: true,
imageData:”data:image/jpeg;base64,/9j/4AAQSkZJRgAB....”
}Fail
{
success: false,
message: 'unable to complete operations'
}