Autodesk Forge Viewer API截图无法加载Markups标记问题求助

1. 示例中canvas元素的作用 #

这个canvas是临时存储合并后图像的载体，不需要对用户可见。原生getScreenShot方法只能拿到纯模型的画布内容，我们需要额外的画布来把「模型截图」和「Markup标记图层」合并成一张完整的图，这个canvas就是用来承载合并逻辑的，你甚至可以动态创建它，不用提前写在HTML代码里。

2. renderToCanvas的调用时机 #

这个方法必须在截图触发逻辑里、拿到模型截图之后调用，不需要在初始化阶段调用。完整逻辑顺序为：

• 触发截图操作
• 调用viewer.getScreenShot拿到纯模型的图像数据
• 创建Image对象加载这张纯模型图
• 等模型图加载完成后，调用MarkupsCore扩展的renderToCanvas方法，把当前所有标记叠加到模型图上
• 从合并后的canvas里导出最终的截图URL

3. 最小改动现有代码的实现方案 #

你只需要修改两处代码就能实现需求，不需要调整其他逻辑：

第一步：存储MarkupsCore扩展实例 #

修改你加载扩展的代码，把MarkupsCore的实例存到viewer对象上方便后续调用：

viewer.loadExtension("Autodesk.CustomDocumentBrowser").then(() => {
    // 存储MarkupsCore实例到viewer对象
    viewer.loadExtension("Autodesk.Viewing.MarkupsCore").then(ext => {
        viewer.markupsCore = ext;
    });
    viewer.loadExtension("Autodesk.Viewing.MarkupsGui");
});

第二步：替换原来的takeSnapshot函数 #

直接替换你现有的takeSnapshot函数即可，已经内置了合并标记的逻辑：

function takeSnapshot(target){    
    $('#snipViewer').click( () => {
        target.getScreenShot(1600, 920, (blobURL) => {
            // 加载纯模型截图
            const modelImg = new Image();
            modelImg.crossOrigin = "anonymous";
            modelImg.onload = () => {
                // 动态创建临时合并用canvas，无需提前写在HTML中
                const mergeCanvas = document.createElement('canvas');
                mergeCanvas.width = 1600;
                mergeCanvas.height = 920;
                const ctx = mergeCanvas.getContext('2d');
                // 先绘制纯模型截图
                ctx.drawImage(modelImg, 0, 0, 1600, 920);
                // 叠加所有Markup标记
                if(target.markupsCore) {
                    target.markupsCore.renderToCanvas(ctx, mergeCanvas, {
                        left: 0,
                        top: 0,
                        width: 1600,
                        height: 920
                    });
                    // 导出合并后的最终截图
                    const finalBlobUrl = mergeCanvas.toDataURL("image/png");
                    // 沿用你原来的后续逻辑
                    $('#sniplink').attr("href", finalBlobUrl);
                    $('#sniplink').html('Not Empty');
                    $('#sniplink').css({"background-image": `url(${finalBlobUrl})`});
                }
            }
            modelImg.src = blobURL;
        });
    });        
}

内容的提问来源于stack exchange，提问作者Dr. Crunch