threejs 画布 todataurl 为空白答案

【问题标题】：threejs canvas todataurl is blankthreejs 画布 todataurl 为空白
【发布时间】：2016-04-23 04:26:42
【问题描述】：

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

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

这给出了预期的结果。为什么有区别，如何避免这种情况也检索第一张图像？

【问题讨论】：

标签： html canvas three.js webgl todataurl

【解决方案1】：

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

一些注意事项：

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()。

【讨论】：

是否有办法在整个文档渲染之后而不是在渲染循环期间捕获图像？假设我不能也不能接触渲染循环..
如果您有权访问renderer 变量，您可以调用renderer.domElement.toDataURL()，查看我的编辑。
看来 renderer.domElement.toDataURL() 也不起作用。凯多，它对你有用吗？此外，在控制台中访问 renderer.domElement 和 $0 没有区别，因为它只是返回画布。
@SantanMaddi，你是对的，它在 Chrome 中不起作用......然而，在 Firefox 中，如果你调用两次 toDataURL 或 readPixel 方法，那么你就得到了图像。 .我不太清楚...但是如果您无法访问渲染循环，我会说您卡住了，唯一的方法是从页面外部执行屏幕截图（浏览器扩展程序或操作系统应用程序）

【解决方案2】：

我也得到了一个纯黑色的图像。

我之前的代码是：

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

我把THREE.WebGLRenderer中的参数改成了：

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

我正在拍摄快照。

希望对你有帮助。

【讨论】：