📜  BabylonJS-创建ScreenShot

📅  最后修改于: 2020-10-27 03:34:26             🧑  作者: Mango


要捕获当前正在使用的屏幕,无法使用打印屏幕按键来获取高分辨率的屏幕截图。 BabylonJS提供了createscreenshot API,可以帮助您做到这一点。它将文件另存为png格式,并且图像质量没有受到影响。

句法

要获取屏幕截图,我们需要提供引擎,摄像头和尺寸,如下所示。

BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 }, function (data) {
   var img = document.createElement("img");
   img.src = data;
   document.body.appendChild(img);    
});

当用户单击该按钮时,将放置一个调用屏幕快照API的按钮。

对传递到屏幕截图API的引擎进行了更改。

var engine = new BABYLON.Engine(canvas, true, { 
   preserveDrawingBuffer: true, stencil: true 
});    

它需要将preserveDrawingBufferstencil之类的选项设置为true。

按钮添加如下-

ssButton = document.createElement("input");
document.body.appendChild (ssButton);

将Click事件添加到上方的按钮中,并调用createscreenshot 。它将在屏幕末尾更新屏幕截图。用于图像src的数据具有创建的屏幕快照URL。

演示版


      BabylonJs - Basic Element-Creating Scene
      
      
   

   
      
      
   

输出

上面的代码行生成以下输出-

在此演示中,我们使用了图像mat.jpg,rugby.jpg,cone.jpg,board.jpg,ring.jpg,d1.png,diamond.jpg 。图像存储在本地的图像/文件夹中,也粘贴在下面以供参考。您可以下载您选择的任何图像并在演示链接中使用。

图片/mat.jpg

垫图

图片/rugby.jpg

橄榄球图片

图片/cone.jpg

圆锥图像

图片/board.jpg

董事会形象

图片/ring.jpg

铃声图片

图片/d1.png

D1图片

图片/diamond.jpg

钻石图像