ImageChooser class

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:

PropertyDescription

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.

Crop image

When you click OK, the ImageChooser sends a request to the server with the following parameters:

KeyDescription

imageData

Base64. The base64 string of the selected image.

imageDisplaySize

String. The width and height of the image.

The width and height of the image

cropRectangle

String. The width, height, and offset of the crop rectangle to the image.

The width, height, and offset of the crop rectangle

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'
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.