CODEWITHSUNDEEP
autodesk-forgeautodesk-viewer
udda
udda

Reputation: 93

Autodesk Forge screenshots does not include the markups

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 ?

Upvotes: 0

Views: 387

Answers (2)

Eman
Eman

Reputation: 1

For me, the answer of "Petr Broz" shows only the last markups. To show all markups, you need to change the third parameter of renderToCanvas function from false to true.

Upvotes: 0

Petr Broz
Petr Broz

Reputation: 9942

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.

Upvotes: 4

Related Questions