threejs canvas 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

这是因为第一个示例_{（参见源代码第 103 行）}确实使用了THREE.WebGLRenderer创建者，而第二个示例_{（参见源代码第 92 行）}使用了THREE.CanvasRenderer.

一些注意事项：

• context2d API 中没有preserveDrawingBuffercontextAttribute，只有 WebGL 有。
• 您只能为每个画布元素创建一个上下文。
• preserveDrawingBuffer创建上下文后无法设置标志
• 使用 Three.js，您可以简单地调用renderer.domElement.toDataURL() （您需要转到iframe 目标才能从开发工具进行调用）。
• 另一个解决方案（比preserveDrawingBuffer 标志更好）是canvas.toDataURL()在浏览器再次控制之前调用渲染循环本身。