1

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

我认为我正在正确解码和保存文件，因为当我对它进行 hexdump 时，我可以看到 PNG 格式的正确初始字符，以及 IHDR 和 IDAT 块头。但是缺少关闭的 IEND。

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

谢谢...（对不起，如果这很愚蠢，我对three.js很陌生）

4

3 回答 3

1

我在使用 Windows 7/Firefox 时遇到了一些类似的问题。PNG 数据 URL 将被随机截断或其他东西，比成功的 PNG 导出短得多。试图将该数据 url 设置为图像 src 导致“图像损坏”异常或 FF 中的某些东西。在我的情况下，在渲染和获取数据 URL 之间设置一个小的 window.setTimeout (10ms) 有点意义。也许 Firefox 在刷新一些画布内部状态或其他东西之前需要 JS 引擎休息一下……很奇怪。

于 2013-05-13T15:34:02.110 回答
0

我切换到 JPG 格式（更小的文件 => 截断更少的问题？）但仍然看到它不起作用，然后我尝试了我在这里找到的这个提示

如果要保存从 Javascript canvas.toDataURL() 函数派生的数据，则必须将空白转换为加号。如果你不这样做，解码的数据就会损坏：

 <?php
      $encodedData = str_replace(' ','+',$encodedData);
      $decodedData = base64_decode($encodedData);
 ?>

这行得通。谢谢，梅卡尔。

这个提示似乎只适用于 JPG。我看到 PNG 在没有 + 替换的情况下正确解码，并且使用它损坏了。我可以使用 JPG，这样我的个人问题就解决了。但是，即使正确解码且未截断，我也从未见过不是黑色的 PNG。

无论哪种方式，我都觉得这种情况很糟糕。+ 是怎么回事？

于 2013-05-14T04:07:55.473 回答
0

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

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

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

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

// Now render the scene
于 2013-05-27T21:36:43.593 回答