Links

capture-photo

Overview

Version compatibility
The capture-photo component was visually updated in version 4.74.0 of JourneyApps Runtime.
Take a photo, or select an existing photo from the device's gallery.

Basic Example

<var name="captured_photo" type="photo" />
<capture-photo bind="captured_photo" label="Add a photo" />

Standard Attributes

bind

label

required

Advanced Attributes

align-content

align-controls

align-label

disabled

downloadable

Optional
Type: boolean
Default: true
Set downloadable to false to hide the download button and prevent the user from downloading a captured/displayed photo.

fullwidth

Optional
Type: boolean
Default: false
Specify whether the photo preview should span the full width of the available screen space.
capture-photo
display-photo
<capture-photo bind="factory" label="Factory Inspection" fullwith="true"/>
<display-photo bind="assembly" label="Assembly" fullwidth="true"/>

icon-position

Version compatibility
icon-position was introduced in version 4.86.1 of the JourneyApps Runtime.

label-case

Version compatibility
label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

label-color

on-change and on-capture

on-capture is functionally similar to on-change, however only the current $value is being passed as an event parameter.

resolution

Optional
Type: small | medium | large
Default: small
Controls the resolution of captured photos. A value of small to limit photos to 1296 x 968 pixels (~1 MP), or medium to limit photos to 2048 x 1536 pixels (~3 MP), or large to limit photos to 3264 x 1536 pixels (~8 MP).

show-if and hide-if

source

Optional
Type: camera | gallery | any
Default: camera
Controls whether the user
  • can only take a new photo using the device's camera,
  • can select an existing photo from their gallery, or
  • can choose either.
Source mode camera to only allow the user to take a new photo using the camera, or gallery to only allow the user to choose a photo from the gallery, or any to allow the user to choose either of the above options.
Layout
Changing the source will also change the layout of the capture-photo component. Source any will show both the camera and gallery buttons.

Component Methods

The following component methods are available when assigning an id to the component and evoking using component.capturePhoto({id:'my-id'}) (or component.displayPhoto({id:'my-id'}) in some cases).

captureMedia

Programmatically open a camera allowing the user to capture a photo.
try{
component.capturePhoto({id: 'my-id'}).captureMedia();
}catch (e) {
// handle exception here
}

deleteMedia

Programmatically clear a captured photo.
try{
component.capturePhoto({id: 'my-id'}).deleteMedia();
}catch (e) {
// handle exception here
}
deleteMedia will trigger an on-change if a function is assigned to it.

downloadMedia

Programmatically trigger a download of the captured/displayed photo.
capture-photo
display-photo
try{
component.capturePhoto({id: 'my-id'}).downloadMedia();
}catch (e) {
// handle exception here
}
try{
component.displayPhoto({id: 'my-id'}).downloadMedia();
}catch (e) {
// handle exception here
}

selectLocalMedia

Programmatically open a file select dialog allowing the user to select a photo on their device.
try{
component.capturePhoto({id: 'my-id'}).selectLocalMedia();
}catch (e) {
// handle exception here
}