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

Question

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

我已经尝试使用html2canvas (https://html2canvas.hertzen.com/)和dom-to-image (https://github.com/tsayen/dom-to-image)库，但也尝试使用默认的canvas方法(如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，但只剪切屏幕的一部分)

Answer 1

如果你使用的是有问题的xBim工具包，你需要知道在内部它使用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();
            });