如何在三个 JS 中截取 CSS 3D 渲染器的屏幕截图？答案

【问题标题】：How to take screenshot of CSS 3D Renderer in Three JS?如何在三个 JS 中截取 CSS 3D 渲染器的屏幕截图？
【发布时间】：2014-08-19 06:29:17
【问题描述】：

我有一个涉及 CSS 3D 渲染器的三个 JS 应用程序。我正在使用 html2canvas 库来截取 document.body 的屏幕截图。

唯一的问题是它会截取除 CSS 3D 渲染器之外的所有内容。

截图的代码如下：

window.addEventListener("keyup", function(e){

    //Listen to 'P' key
    if(e.which !== 80) return;

    html2canvas(document.body, {
      onrendered: function(canvas) {
        var img = canvas.toDataURL();
        window.open( img , 'Final' );
      }
    });
});

如需演示，请访问：

http://nobelbrothers.com/test/CanvasShot 和 http://nobelbrothers.com/CanvasShot

注意：按P截屏（需要关闭弹窗拦截器）。

谢谢

【问题讨论】：

我不相信任何 html 到画布的渲染器都可以处理 3D CSS。
那么有没有其他方法可以在多个显示器/屏幕@gman 之间同步 CSS 3D 场景？

标签： javascript three.js html2canvas

【解决方案1】：

感谢file saver js lib，我实现了这个功能

 <script type="text/javascript" src="js/filesaver.js"></script>

window.addEventListener("keyup", function(e){

    //Listen to 'P' key
    if(e.which !== 80) return;
    Render.domElement.toBlob(function(blob) {
        saveAs(blob, "Final");
    });
});

【讨论】：