threejs画布转换为dataURL后为空白

Question

好的，我知道canvas.toDataUrl()会生成一个png格式的图像。然而，当我尝试从http://threejs.org/examples/#webgl_lines_sphere获取图像时，在Chrome上只能看到一个黑色的图像。要复制步骤 -

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

图像是空白的。 但是，我尝试了一个不同的canvas链接http://threejs.org/examples/#canvas_geometry_cube。请按照以下步骤进行复制。

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

这样可以得到预期的结果。为什么会有差异，如何避免检索第一张图像？

- Santan Maddi

Answer 1

我也遇到了纯黑色的图像。

我的代码以前是：

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

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

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

当我拍照时，会得到一张图片。

希望这可以帮到你。

- Muhammad Arsalan Khan

Answer 2

这是因为第一个例子（参见源代码行103）使用了THREE.WebGLRenderer创建器，而第二个例子（参见源代码行92）使用了THREE.CanvasRenderer。

一些注意事项：

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

- Kaiido

---

有没有一种方法可以在整个文档呈现完成后而不是在呈现循环期间捕获图像？假设我不能也不会接触到呈现循环。 - Santan Maddi

如果您可以访问 renderer 变量，则可以调用 renderer.domElement.toDataURL()，请查看我的编辑。 - Kaiido

似乎 renderer.domElement.toDataURL() 也不起作用。Kaiido，你试过吗？此外，在控制台中访问 renderer.domElement 和 $0 没有区别，因为它们都只返回画布。 - Santan Maddi

@SantanMaddi，你说得对，在Chrome中不起作用... 但是在Firefox中，如果你调用两次toDataURL或readPixel方法，那么你就可以得到图像... 我不太明白... 但是如果你没有访问渲染循环的权限，我会说你被卡住了，唯一的方法就是从页面外部执行截屏（浏览器扩展或操作系统应用程序）。 - Kaiido