Autodesk Forge 屏幕截图不包含标记

Question

我的目的是将屏幕截图与标记一起保存。我关注了这个 tutorial 和这个，但它对我不起作用。屏幕截图总是没有标记。以下是我的代码

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);
  });
}

我从 generateData() 方法中获得了正确的标记，还从 blob 中获得了正确的屏幕截图。但是最终屏幕截图中缺少标记。

我的代码有问题吗？还是我没有正确执行该过程？

Answer 1

假设您已经创建了一些标记（手动或通过 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;
    });
}

如果我运行我的 Forge 应用程序，添加几个标记（在我的例子中使用 Autodesk.Viewing.MarkupsGui 扩展），然后调用此 generateSnapshot 函数，我得到屏幕截图带有预期的标记。

Answer 2

对我来说，“Petr Broz”的答案只显示最后的标记。要显示所有标记，您需要将 renderToCanvas 函数的第三个参数从 false 更改为 true。

Autodesk Forge 屏幕截图不包含标记

Autodesk Forge screenshots does not include the markups

autodesk-forge

autodesk-viewer