cesuim场景截屏功能

cesuim场景截屏功能

说明

cesuim截屏功能：对当前场景viewer范围进行拍照截图，类似快照功能，截图后的照片，可直接下载到浏览器

实现思路

• 获取页面上的截图容器元素
• 监听scene.preRender 场景渲染之前，通过canvas.toDataURL()获取图片的链接，防止图片黑屏
• 利用 创建img 标签或者 a 标签将图片下载至本地

代码实现

// ceium截图功能
function takeScreenshot() {
    const screenshotContainer = document.getElementById('screenshotContainer');
    const link = document.createElement('a');

    const postRenderHandler = function() {
        const screenshot = viewer.scene.canvas.toDataURL();

        screenshotContainer.innerHTML = '';
        screenshotContainer.appendChild(link);

        link.href = screenshot;
        link.download = '截图图片';
        link.click();

        viewer.scene.postRender.removeEventListener(postRenderHandler);
    };

    viewer.scene.postRender.addEventListener(postRenderHandler);
}