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是黑色

回答

相關問題