threejs帆布todataurl是空白的

Question

好的，我知道canvas.toDataUrl（）会以png格式生成图像。但是，当我尝试从http://threejs.org/examples/#webgl_lines_sphere获取图像时。我看到的只是镀铬上的黑色图像。复制步骤 -

1）打开开发控制台并选择canvas元素。 2）canvas = $0 3）context = canvas.getContext('webgl', {preserveDrawingBuffer: true}) 4）img = canvas.toDataUrl() 5）document.write('<img src="'+img+'"/>')

图片为空白。 但是，我尝试在链接http://threejs.org/examples/#canvas_geometry_cube使用不同的画布。请执行以下步骤进行复制。

1）打开开发控制台并选择canvas元素。 2）canvas = $0 3）context = canvas.getContext('2d', {preserveDrawingBuffer: true}) 4）img = canvas.toDataUrl() 5）document.write('<img src="'+img+'"/>')

这给出了预期的结果。为什么存在差异，如何避免检索第一张图像呢？

Answer 1

我也得到了纯黑色图像。

我以前的代码是：

this.renderer = new THREE.WebGLRenderer({premultipliedAlpha: false});

我已将THREE.WebGLRenderer中的参数更改为：

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

我正在拍摄快照。

希望有帮助。

Answer 2

这是因为第一个例子_{（参见source lines 103）}确实使用THREE.WebGLRenderer创建者，而第二个_{（参见source lines 92）}使用一个THREE.CanvasRenderer。

一些注意事项：

• There is no preserveDrawingBuffer contextAttribute in the context2d API, only in the WebGL one.
• You can create only one context per canvas element.
• You can't set the preserveDrawingBuffer flag after context's creation
• With three.js you can simply call renderer.domElement.toDataURL() （您需要转到the iframe target才能使用开发工具进行调用）。
• Another solution，（并且优于preserveDrawingBuffer标志）是在浏览器再次获取控件之前在渲染循环中调用canvas.toDataURL()。