Autodesk Forge screenshots does not include the markups

Question

My intention is to save a screenshot along with the markups. I followed both this tutorial and this answer, but it did not work for me. Screenshot always ended up without the markups. Following is my code

function generateSnaphot(ncrNo_, luName_, keyRef_, markupsStringData) {
  console.log('* * * * * generateSnaphot ');
  var screenshot = new Image();
  screenshot.onload = function () {
    viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then(function (markupCore) {

          // load the markups
          markupCore.show();
          markupCore.enterViewMode();
          markupCore.loadMarkups(markupsStringData, "layerName");

          // ideally should also restore the state of Viewer for this markup

          // prepare to render the markups
          var canvas = document.getElementById('snapshot');
          canvas.width = viewer.container.clientWidth;
          canvas.height = viewer.container.clientHeight;
          var ctx = canvas.getContext('2d');
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);

          markupCore.renderToCanvas(ctx, function() {
            // hide the markups
            //markupCore.hide();
            var canvas = document.getElementById('snapshot');

            const a = document.createElement('a');
            //a.style = 'display: none';
            document.body.appendChild(a);

            a.href = canvas.toDataURL();
            a.download = 'markup.png';
            a.click();

            document.body.removeChild(a);
          }, true);
          // hide the markups
          //markupCore.hide();
      });
  };
  // Get the full image
  viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) {
    console.log('%%%%%%%%%%%%%%% blobURL : ', blobURL);
    CreateAndConnectMedia(ncrNo_, luName_, keyRef_, blobURL);
  });
}

I get the proper markup from the generateData() method and also proper screenshot from the blob. But the markups are missing in the final screenshot.

Is something wrong in my code ? or am i not doing the process properly ?

Answer 1

Here's a modified version of your snippet, assuming that you already have some markups created (either manually, or loaded via markupCore.loadMarkups(markupsStringData, "someLayer"):

function generateSnapshot(viewer) {
    let screenshot = new Image();
    screenshot.onload = async function () {
        const markupCore = await viewer.loadExtension('Autodesk.Viewing.MarkupsCore');
        markupCore.show();
        let canvas = document.createElement('canvas');
        canvas.width = viewer.container.clientWidth;
        canvas.height = viewer.container.clientHeight;
        let ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);
        markupCore.renderToCanvas(ctx, function () {
            const a = document.createElement('a');
            document.body.appendChild(a);
            a.href = canvas.toDataURL();
            a.download = 'markup.png';
            a.click();
            document.body.removeChild(a);
        }, false);
    };
    viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) {
        screenshot.src = blobURL;
    });
}

If I run my Forge app, add a couple of markups (in my case using the Autodesk.Viewing.MarkupsGui extension), and then call this generateSnapshot function, I get the screenshot with markups as expected.