如何在没有标记的情况下获取 forgeviewer 的快照

Posted 2023-03-16

【中文标题】如何在没有标记的情况下获取 forgeviewer 的快照

【英文标题】：How do I get a snapshot of the forgeviewer without markups

【发布时间】：2021-01-28 18:47:13

【问题描述】：

如何获取查看器的快照并将其单独保存为图像？

谢谢

【参考方案1】：

这可以通过组合Viewer3D#getScreenShot 方法和Autodesk.Viewing.MarkupsCore 扩展的renderToCanvas 方法来完成，如下所示：

async function getScreenshotDataUrl(viewer, width, height) 
  const markupExt = await viewer.getExtension('Autodesk.Viewing.MarkupsCore');
  return new Promise(function (resolve, reject) 
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const context = canvas.getContext('2d');
    const image = new Image();
    image.onload = function () 
      context.drawImage(image, 0, 0);
      markupExt.renderToCanvas(context, function () 
        resolve(canvas.toDataURL('image/png'));
      );
    ;
    viewer.getScreenShot(width, height, blob => image.src = blob);
  );

这是一个演示上述代码的代码笔：https://codepen.io/petrbroz/pen/gOMPYRV?editors=0010。

【讨论】：

嗨，这给了我一个错误提示，但使用forge.autodesk.com/blog/screenshot-markups 设法完成了它。但是怎么能单独保存图片呢？

如果您只想存储查看器快照，只需删除 markupExt.renderToCanvas 方法调用并将其替换为 resolve(canvas.toDataURL('image/png'));。

或者，如果您只对标记的图像感兴趣，请完全排除 image.onload 和 viewer.getScreenShot。只需创建一个画布，获取其上下文，调用markupExt.renderToCanvas，最后使用resolve(canvas.toDataURL('image/png')); 返回结果。

谢谢@Petr，它对我有用。设法获取 blob URL。干杯