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

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