javascript - 如何从 Three.js 画布中保存图像？

Question

如何从 Three.js 画布中保存图像？

我正在尝试使用 Canvas2Image，但它不喜欢使用 Threejs。因为画布只有在有一个 div 可以将画布对象附加到时才被定义。

http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images

Answer 1

由于 toDataURL 是 canvas html 元素的一种方法，因此也适用于 3d 上下文。但是你必须注意几件事。

1. 确保在初始化 3D 上下文时将preserveDrawingBufferflag 设置为 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 ) 并提出了一个不会减慢您的应用程序的解决方案。

    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 的人 :)

Answer 3

使用canvas创建url，然后同样可以下载

function createImage(saveAsFileName) {

    var canvas = document.getElementById("canvas");

    var url = canvas.toDataURL();

    var link = document.createElement('a');

    link.setAttribute('href', url);
    link.setAttribute('target', '_blank');
    link.setAttribute('download', saveAsFileName);

    link.click();
}