xBIM Viewer: создание скриншота из canvas - PullRequest
Новая
       46

xBIM Viewer: создание скриншота из canvas

0 голосов
/ 26 июня 2019

Я использую xBim Toolkit (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) библиотек, но также пытались использовать методы холста по умолчанию (например, 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 Ответ

0 голосов
/ 27 июня 2019

Если вы используете xBim Toolkit, как описано в вопросе, вам нужно знать, что он внутренне использует WebGL для представления объектов.Чтобы сделать снимок экрана при работе WebGl, я нашел один способ (не уверен, что он лучший, но он работает).Вы можете выполнить следующий код Javascript перед загрузкой вашей страницы и xBim Viewer: 

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();
            });
...