capture-photo
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.
<var name="captured_photo" type="photo" />
<capture-photo bind="captured_photo" label="Add a photo" />

Optional
Type:
boolean
Default:
true
Set
downloadable
to false
to hide the download button and prevent the user from downloading a captured/displayed photo.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"/>

Version compatibility
icon-position
was introduced in version 4.86.1 of the JourneyApps Runtime.Version compatibility
label-case
was introduced in version 4.80.0 of the JourneyApps Runtime.on-capture
is functionally similar to on-change
, however only the current $value
is being passed as an event parameter.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).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.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:Programmatically open open a camera allowing the user to capture a photo.
try {
component.capturePhoto({id: 'my-id'}).captureMedia();
} catch (e) {
// handle exception here
}
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
}
Programmatically clear a captured photo.
try {
component.capturePhoto({id: 'my-id'}).deleteMedia();
} catch (e) {
// handle exception here
}
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
}
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
}
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
}
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
}
Last modified 3mo ago