如何从Three.js画布中保存图像？ [英] How do you save an image from a Three.js canvas?

问题描述

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

How do you save an image from a Three.js canvas?

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

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.

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

推荐答案

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

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.

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

1. Make sure when the 3D context is initialized you set preserveDrawingBuffer flag to true, like so:

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

然后用户 canvas.toDataURL（）获取图像

在实例化渲染器时，你需要执行以下操作：

In threejs you would have to do the following when the renderer is instantiated:

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

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

Also, keep in mind this can have performance implications. (Read: https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008)

这是仅适用于webgl渲染器，如果是threejs canvasRenderer，你可以只需直接执行 renderer.domElement.toDataURL（）; ，无需初始化参数。

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实验：< a href =http://jsfiddle.net/TxcTr/3/ =noreferrer> http://jsfiddle.net/TxcTr/3/ 按' p '截图。

My webgl experiment: http://jsfiddle.net/TxcTr/3/ press 'p' to screenshot.

道具 gaitat ，我刚跟着在他的评论中链接以获得这个答案。

Props to gaitat, I just followed the link in his comment to get to this answer.

这篇关于如何从Three.js画布中保存图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！