Search code examples
autodesk-forgeautodesk-viewerautodesk

How do I get a snapshot of the forgeviewer without markups


How can i get a snapshot of the viewer and save it separately as an image?

Thank you


Solution

  • This can be done by combining the Viewer3D#getScreenShot method and the renderToCanvas method of the Autodesk.Viewing.MarkupsCore extension, like so:

    async function getScreenshotDataUrl(viewer, width, height) {
      const markupExt = await viewer.getExtension('Autodesk.Viewing.MarkupsCore');
      return new Promise(function (resolve, reject) {
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const context = canvas.getContext('2d');
        const image = new Image();
        image.onload = function () {
          context.drawImage(image, 0, 0);
          markupExt.renderToCanvas(context, function () {
            resolve(canvas.toDataURL('image/png'));
          });
        };
        viewer.getScreenShot(width, height, blob => image.src = blob);
      });
    }
    

    Here's a codepen demonstrating the above code: https://codepen.io/petrbroz/pen/gOMPYRV?editors=0010.