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

pagebind

label

pagelabel

required

pagerequired

Advanced Attributes

align-content

pagealign-content

align-controls

pagealign-controls

align-label

pagealign-label

control-order

pagecontrol-order

disabled

pagedisabled

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

<capture-photo bind="factory" label="Factory Inspection" fullwith="true"/>

display-photo

<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.

pageicon-position

id

pageid

label-case

Version compatibility

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

pagelabel-case

label-color

pagelabel-color

on-change and on-capture

pageon-change

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

pageshow-ifpagehide-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

try {
    component.capturePhoto({id: 'my-id'}).closeMedia();
} catch (e) {
    // handle exception here
}

display-photo

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

try{
    component.capturePhoto({id: 'my-id'}).downloadMedia();
} catch (e) {
    // handle exception here
}

display-photo

try {
    component.displayPhoto({id: 'my-id'}).downloadMedia();
} catch (e) {
    // handle exception here
}

openMedia

Programmatically open the photo preview.

capture-photo

try {
    component.capturePhoto({id: 'my-id'}).openMedia();
} catch (e) {
    // handle exception here
}

display-photo

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

try {
    component.capturePhoto({id: 'my-id'}).scrollIntoView();
} catch (e) {
    // handle exception here
}

display-photo

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
}