xBIM 查看器：从画布创建屏幕截图

Posted 2023-02-25

【中文标题】xBIM 查看器：从画布创建屏幕截图

【英文标题】：xBIM Viewer: Create a screenshot from canvas

【发布时间】：2019-06-26 09:10:53

【问题描述】：

我正在使用 xBim Toolkit (http://docs.xbim.net/) 进行 3D 对象渲染，并且需要在单击按钮时创建当前场景的屏幕截图。 xBim 使用画布来表示对象的图形。 整个项目基于 C#、.NET 工具和 javascript，所以这是可以用来解决这个问题的工具范围。

我已经尝试过使用 html2canvas (https://html2canvas.hertzen.com/) 和 dom-to-image (https://github.com/tsayen/dom-to-image) 库，但也尝试过使用默认画布方法（如 myCanvas.toDataUrl() 或 myCanvas.toBlob()）。 它们都只生成一个黑色或白色背景的空图像，但没有保存 xBim 对象。

获得任何有用屏幕截图的唯一方法是使用 System.Drawing.Graphics，然后创建整个屏幕的屏幕截图（由于许多原因，这不是最佳实现）。

public static void MakeScreenshot()

    var x = Math.Abs(WebBrowser.MousePosition.X);
    var y = Math.Abs(WebBrowser.MousePosition.Y);
    var bounds = Screen.FromPoint(new Point(x, y)).Bounds;

    Bitmap bitmap = new Bitmap(bounds.Width, bounds.Height);

    Graphics graphics = Graphics.FromImage(bitmap as System.Drawing.Image);
            graphics.CopyFromScreen(25, 25, 25, 25, bitmap.Size);

    string screenshotFilePath = Path.Combine(DirectoryPath, "Screenshot.jpg");

    bitmap.Save(screenshotFilePath, ImageFormat.Jpeg);

我想要只有画布区域的屏幕截图。 是否使用Javascript或C#代码实现并不重要（即使使用System.Drawing.Graphics，但只剪切部分屏幕）

【参考方案1】：

如果您正在使用问题描述的 xBim Toolkit，您需要知道它在内部使用 WebGL 进行对象表示。 为了在 WebGl 运行时截取屏幕截图，我找到了一种方法（不确定它是否是最好的，但它有效）。 您可以在加载页面和 xBim 查看器之前执行以下 Javascript 代码：

HTMLCanvasElement.prototype.getContext = function (origFn) 
        return function (type, attributes) 
            if (type === 'webgl') 
                attributes = Object.assign(, attributes, 
                    preserveDrawingBuffer: true,
                );
            
            return origFn.call(this, type, attributes);
        ;
    (HTMLCanvasElement.prototype.getContext);

它应该保留绘图缓冲区并使您能够以某些已知方式获取屏幕截图，例如使用 dom-to-image 库：

domtoimage.toJpeg(document.getElementById('canvas'),  quality: 0.95 )
            .then(function (dataUrl) 
                var link = document.createElement('a');
                link.download = 'Screenshot.jpeg';
                link.href = dataUrl;
                link.click();
            );