Autodesk Forge 屏幕截图不包含标记答案

【问题标题】：Autodesk Forge screenshots does not include the markupsAutodesk Forge 屏幕截图不包含标记
【发布时间】：2021-02-21 10:05:28
【问题描述】：

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

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 中获得了正确的屏幕截图。但最终屏幕截图中缺少标记。

我的代码有问题吗？还是我没有正确处理这个过程？

【问题讨论】：

标签： autodesk-forge autodesk-viewer

【解决方案1】：

这是您的 sn-p 的修改版本，假设您已经创建了一些标记（手动或通过 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 函数，我会得到符合预期的带有标记的屏幕截图。

【讨论】：

【解决方案2】：

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

【讨论】：