capture-photo

Overview

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

Copy

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

Copy

<display-photo bind="assembly" label="Assembly" fullwidth="true"/>

icon-position

id

label-case

label-color

on-change and on-capture

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.

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.

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
}

downloadMedia

Programmatically trigger a download of the captured/displayed 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.

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.

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
}