Question

我正在尝试使用renderer.domElement.toDataURL（“image / png”）抓取屏幕截图，并将其保存到文件中。图像大小合适，但它是黑色的。我打开了preserveDrawingBuffer。

我认为我正在解码并正确保存文件，因为当我进行hexdump时，我可以看到PNG格式的正确初始字符，以及IHDR和IDAT块头。然而，关闭IEND失踪了。

这里有任何已知问题吗？提示？如果重要，Windows 7 / Firefox是最新的。

谢谢...（对不起，如果这是愚蠢的，我对three.js很新）

Answer 1

我在Windows 7 / Firefox上遇到过类似的问题。 PNG数据URL会被随机截断，或者比成功的PNG导出要短得多。尝试将该数据URL设置为图像src导致“图像损坏”异常或FF中的某些内容。从根本上说它没什么意义，在我的情况下，在渲染和获取数据URL之间设置一个小窗口.setTimeout（10ms）。也许Firefox在刷新某些画布内部状态之前需要从JS引擎中休息一下......很奇怪。

Answer 2

我切换到JPG格式（较小的文件=＆gt;截断少了一个问题？）仍然看到它无法正常工作，然后我尝试了这个提示，我发现here

如果要保存从Javascript派生的数据 canvas.toDataURL（）函数，你必须将空格转换为加号。如果不这样做，则解码数据已损坏：
 <?php
      $encodedData = str_replace(' ','+',$encodedData);
      $decodedData = base64_decode($encodedData);
 ?>

这很有用。谢谢，Mekal。

此提示似乎仅适用于JPG。我看到PNG正确解码而没有+替换，并且腐败地使用它。我可以使用JPG，这样我的个人问题就解决了。然而，即使正确解码并且没有被截断，我也从未看到过非黑色的PNG。

无论哪种方式都有一种糟糕的情况，我觉得。 +是什么？

Answer 3

黑色纹理表示您未指示需要更新纹理。

此外，您不需要使用canvas.toDataURL()。您可以将画布引用传递给THREE.Texture对象。

var canvas = document.getElementById('#myCanvas');

var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

// Now render the scene

three.js toDataURL PNG是黑色的

3 个答案: