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:
booleanDefault:
trueSet
downloadable to false to hide the download button and prevent the user from downloading a captured/displayed photo.Optional
Type:
booleanDefault:
falseSpecify 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 | largeDefault:
smallControls 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 | anyDefault:
cameraControls 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