javascript 如何从 Three.js 画布中保存图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15558418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you save an image from a Three.js canvas?
提问by rjd
How do you save an image from a Three.js canvas?
如何从 Three.js 画布中保存图像？
I'm attempting to use Canvas2Image but it doesn't like to play with Threejs. Since the canvas isn't defined until it has a div to attach the canvas object to.
我正在尝试使用 Canvas2Image 但它不喜欢使用 Threejs。因为画布直到它有一个 div 才能定义画布对象。
http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images
http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images
回答by Dinesh Saravanan
Since the toDataURL is a method of canvas html element, that will work for 3d context too. But you have to take care of couple of things.
由于 toDataURL 是 canvas html 元素的一种方法，因此它也适用于 3d 上下文。但是你必须注意几件事。
Make sure when the 3D context is initialized you set
preserveDrawingBufferflag to true, like so:var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});Then user
canvas.toDataURL()to get the image
确保在初始化 3D 上下文时将
preserveDrawingBuffer标志设置为 true，如下所示：var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});然后用户
canvas.toDataURL()获取图像
In threejs you would have to do the following when the renderer is instantiated:
在 Threejs 中，当渲染器被实例化时，你必须执行以下操作：
new THREE.WebGLRenderer({
preserveDrawingBuffer: true
});
Also, keep in mind this can have performance implications. (Read: https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008)
另外，请记住，这可能会对性能产生影响。（阅读：https: //github.com/mrdoob/three.js/pull/421#issuecomment-1792008）
This is only for webgl renderer, in case of threejs canvasRenderer though, you can simply do renderer.domElement.toDataURL();directly, no initialization parameter needed.
这仅适用于 webgl 渲染器，但在threejs canvasRenderer 的情况下，您可以直接执行renderer.domElement.toDataURL();，不需要初始化参数。
My webgl experiment: http://jsfiddle.net/TxcTr/3/press 'p' to screenshot.
我的 webgl 实验：http: //jsfiddle.net/TxcTr/3/按“ p”来截图。
Props to gaitat, I just followed the link in his comment to get to this answer.
道具gaitat，我只是按照他评论中的链接来获得这个答案。
回答by CapsE
I read the conversation posted by Dinesh (https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008) and came up with a solution that won't slow down your application.
我阅读了 Dinesh 发布的对话（https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008）并提出了一个不会减慢应用程序速度的解决方案。
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
if(getImageData == true){
imgData = renderer.domElement.toDataURL();
getImageData = false;
}
}
With this you can leave the preserveDrawingBuffer-Flag at false and still get the image from THREE.js. Simply set getImageData to true and call render() and you are good to go.
有了这个，您可以将preserveDrawingBuffer-Flag 保留为false 并仍然从THREE.js 获取图像。只需将 getImageData 设置为 true 并调用 render() 就可以了。
getImageData = true;
render();
console.debug(imgData);
Hope this helps people like me who need the high fps :)
希望这可以帮助像我这样需要高 fps 的人 :)
