three.js toDataURL PNG是黑色

我试图抓住renderer.domElement.toDataURL（“image/png”）的截图，并将其保存到文件中。图像尺寸合适，但是是黑色的。我有preserveDrawingBuffer打开。three.js toDataURL PNG是黑色

我想我正确解码并保存文件，因为当我hexdump它时，我可以看到正确的PNG格式的初始字符，以及IHDR和IDAT块头。但是最后的IEND缺失。

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

谢谢...（很抱歉，如果这是愚蠢的，我很新的three.js所）

来源

2013-05-13 Bathsheba

你有没有看着http://stackoverflow.com/questions/16431318/webgl-single-frame-screenshot-of-webgl – gaitat 2013-05-13 11:29:31

我有几分类似的问题在Windows 7/Firefox浏览器。 PNG数据网址将被随机截断或其他东西，比成功的PNG导出要短得多。试图将该数据url设置为图像src导致“图像损坏”异常或FF中的某些内容。尽管没什么意义，但在我的情况下，在呈现和获取数据URL之间设置一个小window.setTimeout（10毫秒）。也许Firefox在刷新一些画布内部状态之前需要从JS引擎中休息一下......奇怪。

来源

2013-05-13 15:34:02 yaku

谢谢！我同意它看起来像PNG的被截断。我有相当大的，如300K，甚至延迟1秒，我没有看到他们可靠地完成。我确实看到他们几次到达IEND块，但图像仍然是黑色的。参看下面我放弃了，并用JPG代替。 – Bathsheba 2013-05-14 04:09:30

我有一个repro在这里：http://jsfiddle.net/u3tHa/。创建了一堆画布，提取图像URL，将其加载到img标记中，然后将其复制到画布以检查最终颜色。在第一次运行时，当我在Forefox中加载小提琴时，很多最终的画布都是黑色的。 – 2013-11-27 21:55:06

我切换到JPG格式（小文件=>截断不是一个问题？），仍然看到它不工作，那么我想这个提示，我发现here

如果你想保存数据这是从Javascript canvas.toDataURL（）函数派生而来的，您必须将空白转换为正整数。如果你不这样做，解码后的数据被破坏：
<?php 
     $encodedData = str_replace(' ','+',$encodedData); 
     $decodedData = base64_decode($encodedData); 
?> 

这个工作。谢谢，梅卡尔。

此提示似乎只适用于JPG。我看到PNG正确解码没有+替换，并腐败地与它。我可以使用JPG格式，以便解决我的个人问题。然而，我从来没有看到即使解码正确并且不被截断也不是黑色的PNG。

不管怎么样，我都觉得这种糟糕的情况。什么是+的？

来源

2013-05-14 04:07:55 Bathsheba

黑色纹理是一种标志，表示您未指示纹理需要更新。另外，您不需要使用canvas.toDataURL()。您可以将画布引用传递给THREE.Texture对象。

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

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

// Now render the scene

来源

2013-05-27 21:36:43

three.js toDataURL PNG是黑色

回答

相关问题