Question

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

我正在尝试使用Canvas2Image，但它不喜欢玩Threejs。由于画布没有定义，直到它有一个div来附加画布对象。

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

Answer 1

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

确保在初始化3D上下文时，将preserveDrawingBuffer标志设置为true，如下所示：
```
var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
```
然后用户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

使用画布创建网址，然后可以下载相同的网址

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();
}

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

3 个答案: