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" source="any" />

Standard Attributes

bind

label

required

Advanced Attributes

align-content

align-controls

align-label

control-order

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.

id

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 an id is assigned to the component and component.capturePhoto({id:'my-id'}) / component.displayPhoto({id:'my-id'}) is called from JS/TS:

captureMedia

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

closeMedia

Programmatically close the photo preview.
capture-photo
display-photo
try {
component.capturePhoto({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
try {
component.displayPhoto({id: 'my-id'}).closeMedia();
} 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
}

openMedia

Programmatically open the photo preview.
capture-photo
display-photo
try {
component.capturePhoto({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
try {
component.displayPhoto({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}

scrollIntoView

Programmatically scroll until the capture-photo / display-photo component is visible in the view.
capture-photo
display-photo
try {
component.capturePhoto({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}
try {
component.displayPhoto({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}

selectLocalMedia

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