如何从Three.jscanvas保存图像？

如何从Three.jscanvas保存图像？

我试图使用Canvas2Image，但不喜欢玩Threejs。 由于canvas没有被定义，直到它有一个div来附加canvas对象。

Canvas2Image: Save out your canvas data to images

Answer 1

由于toDataURL是一个canvas html元素的方法，所以也适用于3d上下文。 但是你必须照顾好几件事情。

1. 确保3D上下文初始化时，您将preserveDrawingBuffer标志设置为true，如下所示：

    var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); 

2. 然后用户canvas.toDataURL()来获取图像

在threejs中，当渲染器被实例化时，你将不得不做下面的事情：

 new THREE.WebGLRenderer({ preserveDrawingBuffer: true }); 

另外请记住，这可能会有性能影响。 （阅读： https ： //github.com/mrdoob/three.js/pull/421#issuecomment-1792008 ）

这只适用于webgl渲染器 ，但在threejs canvasRenderer的情况下，您可以简单地执行renderer.domElement.toDataURL(); 直接，不需要初始化参数。

我的webgl实验： http : //jsfiddle.net/TxcTr/3/按' p '来截图。

道具gaitat ，我只是按照他的评论中的链接来得到这个答案。

Answer 2

我阅读了由Dinesh发布的对话（ https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008 ），并提出了一个不会减慢应用程序速度的解决scheme。

  function render() { requestAnimationFrame(render); renderer.render(scene, camera); if(getImageData == true){ imgData = renderer.domElement.toDataURL(); getImageData = false; } } 

有了这个，你可以将preserveDrawingBuffer-Flag设置为false，然后从THREE.js中获取图像。 只需将getImageData设置为true，然后调用render（）就可以了。

 getImageData = true; render(); console.debug(imgData); 

希望这有助于像我这样需要高fps的人:)