Loading...

img


Inherits from Text Control.


Property:


ImageCaptured

Specifies the name of the function to call when an image has been captured by the user. The argument to the function is the image data represented using the object URL format:

data:image/[image-format];base64, [base64 encoded value of image]

Example

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA….

ShowIcon

Specifies whether to display a camera icon on the camera button. The default value is true.


Example

This example shows how to use the Camera control to take a picture and display the result using the Image control.

<Form>
<Style>
<Layouts>
<Grid Name="grid" Rows="1fr" Columns="1fr" />
</Layouts>
</Style>
<Functions>
<Function Name="ImageCaptured" Parameters="imageData">
this.ViewState.Image.src = imageData;
</Function>
</Functions>
<EventHandlers>
<FormEventHandler On="Init">
this.addViewStateModel("Image", { src: undefined});
</FormEventHandler>
</EventHandlers>
<UI Grid="grid">
<Grid Rows="auto 1fr" Columns="120px 1fr">
<Camera Row="1" Column="1" ImageCaptured="ImageCaptured" ShowIcon="true" Text="Take picture" />
<Image Row="2" Column="1" ColumnSpan="2" Source="{Binding Path:ViewState.Image.src}" />
</Grid>
</UI>
</Form>

Images below in the following order:

  1. User presses “Take picture” to launch camera,
  2. Camera is active. User presses the camera trigger button to take a picture,
  3. Image has been captured from the camera, and displayed in the Form using the Image control.

Videos