ImageChooser class
The ImageChooser class allows you to select an image from your local computer, and crop it in Web AppBuilder Developer Edition.
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'
}