Snapshot

The Visual Component is capable of taking static image snapshots of the current 3D scene. These images can then be processed however the host site prefers, such as trigger a download to the user’s device, sending the image to a backend database, or displaying the image on the page.

Implementation

To enable the ability to generate an image of the current view of the Dopple Visual Component we can add an <av-snapshot> tag, as a child of the <av-native-ui> tag:

<atlatl-visual ...>
    <av-product ...></av-product>
    <av-native-ui>
        <av-snapshot></av-snapshot>
    </av-native-ui>
</atlatl-visual>

By default, the snapshot feature will capture a 1920x1080 image that does not utilize antialiasing and download it to the user’s machine as snapshot.png. These settings can be modified through attributes as detailed in the API documentation. User Interaction

Then, we need to allow the user to trigger this functionality using one of two methods: automatic triggers or manual triggers.

1. Automatic triggers

The suggested method is to add a native-button boolean attribute to the av-snapshot tag.

<atlatl-visual ...>
    <av-product ...></av-product>
    <av-native-ui>
        <av-snapshot native-button></av-snapshot>
    </av-native-ui>
</atlatl-visual>

This will create a “snapshot” icon button in the lower left-hand corner of your Visual Component window that displays a modal when clicked. This modal contains a few final parameters that the user can set before saving the snapshot image to their device.

2. Manual triggers

Alternatively, a <button> element can be manually created anywhere in the DOM, and then have a data-av-snapshot-trigger attribute applied to it.

HTML

<!-- Custom snapshot button -->
<button data-av-snapshot-trigger>Take Snapshot</button>

The snapshot modal

If the native-button attribute is provided, a built-in Embedded UI modal containing controls that allow the user to change certain settings about the image will appear when the button is clicked.

HTML

<av-native-ui>
    <av-snapshot native-button no-native-modal></av-snapshot>
</av-native-ui>

This modal can be disabled by adding a no-native-modal boolean attribute to the <av-snapshot> tag.

Using the snapshot-taken event

If we want to do additional processing when the image is taken, such as displaying the image on the page in addition to having the user download the image, we can register for the snapshot-taken event that is emitted from the av-snapshot tag. The snapshot-taken event has a detail property that contains the base64 string representation of the image that was captured.

JS

const snapshotFeature = document.getElementById('snapshot-feature');
snapshotFeature.addEventListener('snapshot-taken', (event) => {
  const image = document.getElementById('product-image');
  image.src = event.detail;
});

Registering for the snapshot-taken event does not impact the functionality described above and will be triggered whenever an image is captured, even if the disable-save-to-disk attribute is provided and the image is not downloaded for the user.

Attributes

Attribute	Type	Required	Description
antialiasing	boolean	optional	Whether to use the antialiasing in the snapshot. Will default to true unless specified.
disable-save-to-disk	boolean	optional	Will disable saving the snapshot to disk (the user’s device). Will default to false (so by default the snapshot will be saved to disk).
file-name	string	optional	The filename (without extension) to use when saving the snapshot. The file will be saved as a PNG. Only applies when the disable-save-to-disk attribute is not present. Defaults to snapshot.
height	number	optional	The height in pixels to use when capturing the snapshot. Defaults to 1920.
native-button	boolean	optional	Whether to display the Embedded UI button. Defaults to false. Dynamically adding or removing this attribute will ignore any prior calls to the showNativeButton() method.
native-button-location	string	optional	The corner where the button should display. Supported values are bottom left and bottom right. Only applies when the native-button attribute is true. Defaults to bottom left.
no-native-modal	boolean	optional	Whether to not display the resolution and antialiasing modal. Only applies when the native-button attribute is true.
width	number	optional	The width in pixels to use when capturing the snapshot. Defaults to 1080.

Events

Event	Description
snapshot-taken	Triggered when the snapshot is captured. The event detail is the base64 string representing the image.
showNativeButton(show: boolean)	Sets whether to show or hide the Embedded UI button. Calling this method will ignore the value of the native-button attribute.

Methods

Method	Description
showNativeButton(show: boolean)	Sets whether to show or hide the Embedded UI button. Calling this method will ignore the value of the native-button attribute.