Skip to main content

Snapshot

The Dopple Visual instance comes with a captureImage method that will take a snapshot of the 3D scene from the user’s current point of view. This will generate a PNG image, which can then be saved to the user’s device.

captureImage takes in an object with parameters for the filename, image size, and anti-aliasing settings.

JS
const renderCanvas = document.getElementById('my-canvas')

const captureSnapshot = () => {
new Atlatl.Visual(renderCanvas).captureImage({
name: 'my-filename', // ".png" will be appended to the end automatically
sizeOptions: {
height: 1080, // image height in pixels
width: 1920 // image width in pixels
},
antialiasing: true // or false
})
}

Full code example

index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<!-- Link to the Visual Component's scripts -->
<script src="https://builds.dopple.io/atlatl-visual-api/releases/current/index.js" defer></script>
<!-- Link to custom scripts -->
<script src="scripts.js" defer></script>
</head>
<body>
<!-- Canvas to render the 3D scene too -->
<canvas id="my-canvas"></canvas>
<button id="snapshot-button">Capture snapshot</button>
</body>
</html>