Autodesk Forge 获取带有标记的屏幕截图

Posted 2023-03-16

【中文标题】Autodesk Forge 获取带有标记的屏幕截图

【英文标题】：Autodesk Forge get screenshot with markups

【发布时间】：2020-06-06 16:23:17

【问题描述】：

我有一个 Autodesk forge 查看器的标记扩展。我想得到带有标记的屏幕截图，但只得到没有标记的屏幕截图。 我尝试使用此代码获取屏幕截图

          getScreenShoot.addEventListener('click', () => 
            let screenshot = new Image();
            markup.leaveEditMode();
            markupsData = JSON.parse(localStorage.getItem('markupsData'));
            markupsData.map((mark, index) => 
              markup.loadMarkups(mark, `markups-svg + $index`);
            );
            let canvas = document.getElementById('snapshot');
            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);
            markup.renderToCanvas(ctx);

            viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) 
              screenshot.src = blobURL;
              var saveImg = document.createElement('a');
              screenshot.appendChild(saveImg);
              saveImg.style.display = 'none';
              saveImg.href = blobURL;
              saveImg.download = "screenshot.jpg";
              document.body.appendChild(saveImg);
              saveImg.click();
              markup.hide();
              markup.leaveEditMode();
              markupTools.style.display = 'none';
            );
    )````
Please help me to find a trouble in this code, maybe it's not supported in viewer 7.*

【参考方案1】：

请使用以下方式调用renderToCanvas，因为重新渲染工作在内部是异步过程，图像加载也是异步的。

markup.renderToCanvas(ctx, function() 
  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);

完整代码：

function snaphot() 
  var screenshot = new Image();
  screenshot.onload = function () 
      viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then(function (markupCore) 

          // load the markups
          markupCore.show();
          markupCore.loadMarkups(markupSVG, "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) 
    screenshot.src = blobURL;
);

【讨论】：

好的，谢谢，这是一个解决方案，但我有一个新问题。此代码仅下载没有模型的标记。为什么？对吗？？

请考虑提供您的最低可重现代码示例。这段代码在我下载的图片中显示了模型和标记

我添加了完全相同的功能，但它只给我模型的屏幕截图而不是它上面的标记。下载 markup.png 文件时没有错误。 @EasonKang，你能帮帮我吗！