javascript - Canvas 屏幕截图不起作用

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

In all previous examples I didn't get the image, I get either a black or transparent image

二维:

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

Only the 2D exemple gave back the correct image

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

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 或其他库。

感谢您的阅读，希望这对将来的人有所帮助。