画布屏幕截图不起作用

Question

前段时间，我可以使用toDataURL 函数从我的 webGL 3D 模型中截取屏幕截图，但突然停止工作，现在我不行了能够从任何 3D 模型获取图像。

有关更多见解，请参阅下文：

三个JS示例：

• http://threejs.org/examples/webgl_animation_cloth.html
• http://threejs.org/examples/webgl_buffergeometry.html

WebGL 示例：

• http://madebyevan.com/webgl-water/

基本示例：

• http://stemkoski.github.io/Three.js/HelloWorld.html
• http://learningwebgl.com/lessons/lesson01/index.html

在之前的所有示例中，我都没有得到图像，我得到的是黑色或透明图像

二维：

• http://jsfiddle.net/m7sA9/show/

只有 2D 示例返回正确的图像

在之前的所有示例中，我都使用这种简单的方法来获取图像。

document.getElementsByTagName('canvas')[0].toDataURL();

知道我做错了什么吗？

---

我在 MacBook Pro 上尝试过：Chrome 和 FireFox，以及在 Windows 8.1 上的 FireFox，我得到了相同的结果

以下是我如何在 Chrome 上进行测试的动画

Answer 1

我在我的 Threejs 应用程序中找到了解决这个问题的方法，解决方案就像将标志设置为 true 一样简单，所以在我的 Threejs 实例中我添加了preserveDrawingBuffer：

var renderer   = new THREE.WebGLRenderer({
  preserveDrawingBuffer   : true   // required to support .toDataURL()
});

这就是使用 ThreeJs 的模型，所以我认为问题与配置设置有关，并且必须有一些使用普通 WebGl 或其他库的选项。

感谢您的阅读，我希望这对以后的人有所帮助。