Snapshots

Dopple’s SDK provides an easy way to capture 2D snapshot images of your 3D scene with a single method call.

These images can be used for a wide variety of purposes, such as generating product previews, showing thumbnails of the configured product in user’s carts, or attaching it as a reference image in followup emails to customers or manufactures after placing an order.

Capturing a Snapshot

The takeSnapshot() method allows you to capture a snapshot of the current canvas.

await dopple.takeSnapshot();

Customizing the Snapshot

An options object may be passed to the takeSnapshot() method to modify the snapshot, such as setting a custom resolution or file name, or calling a custom function to handle the resulting image data.

await dopple.takeSnapshot({
  fileName: "my-snapshot-name",
  mimeType: "image/png",
  size: {
    width: 800,  // pixels
    height: 600, // pixels
  },
  imageHandler: (imageData) => { /* ... */ }
});

The options object accepts the following properties:

Parameter	Type	Description
`fileName`	string	The name of the file to save the snapshot as. Default: `{projectName}_snapshot`
`mimeType`	string	The MIME type of the snapshot. Default: `"image/png"`
`size`	SizeOptions	An object containing the width and height of the snapshot in pixels. Example: `{ width: 800, height: 600 }`
`imageHandler`	function	A function to be called when the snapshot is captured.

Passing a Custom Image Handler

By default, takeSnapshot() will trigger a file download of the snapshot, allowing the user to save it to their device. However, depending on your use case, you may want to process the image data in other ways, such as automatically getting a snapshot of the current configured product and sending it to your site’s backend to use as a thumbnail when the user adds it to their cart.

To do this, pass a custom imageHandler function in your options object, which will be called with the image data when the snapshot is captured.

await dopple.takeSnapshot({
  imageHandler: (imageData) => {
    // Do anything you need to with the image data here
    console.log(imageData);
  };
});

The imageData parameter passed to the imageHandler function is a Blob object containing the image data for the snapshot.

Live Demo

Snapshot Settings Width: Height: Filename: .png

Full Code Example

<html>
  <head>
    <script type="module">
      import { DoppleXR } from "https://builds.dopple.io/packages/dopple-sdk@latest/dopple-sdk.js";

      // Initialize Dopple
      const dopple = new DoppleXR({
        container: document.getElementById("dopple-container"),
        owner: "my-org",
        workspace: "my-workspace",
        projectName: "My Project",
        productVersion: "1",
        selection: {}
      });

      await dopple.load();
      dopple.resize({ trackParentSize: true });
      dopple.run();

      // Save a snapshot image when the "Take Snapshot" button is clicked
      const snapshotButton = document.getElementById("snapshot-button");
      snapshotButton.addEventListener("click", async () => {
        await dopple.takeSnapshot({
          fileName: "my-snapshot-name",
          mimeType: "image/png",
          size: {
            width: 1280,
            height: 1024,
          },
          imageHandler: (imageData) => {
            console.log(imageData);
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="dopple-container"></div>
    <button id="snapshot-button">Take Snapshot</button>
  </body>
</html>