WebGL單幀「截圖」webGL

Question

試圖尋找這樣的東西，但我沒有運氣。我試圖用我的webgl圖像當前狀態的屏幕截圖打開一個新選項卡。基本上，它是一個3d模型，可以更改顯示哪些對象，這些對象的顏色和背景顏色。目前，我使用了以下內容：

var screenShot = window.open(renderer.domElement.toDataURL("image/png"), 'DNA_Screen'); 

這條線在我的模型的當前圖像打開一個新標籤成功，但不顯示當前背景色。它也沒有正確顯示標籤名稱。相反，選項卡名稱始終爲「PNG 1024x768」。

有沒有辦法改變我的window.open，使背景顏色顯示？正確的標籤名稱也很棒，但背景顏色是我最關心的。

Answer 1

如果你打開沒有URL的窗口，你可以從打開窗口的JavaScript直接訪問它的整個DOM。

var w = window.open('', ''); 

然後，您可以設置或添加任何你想要的

w.document.title = "DNA_screen"; 
w.document.body.style.backgroundColor = "red"; 

並添加截圖

var img = new Image(); 
img.src = someCanvas.toDataURL(); 
w.document.body.appendChild(img); 

Answer 2

嗯，它比你的一個班輪長得多，但你可以改變上下文矩形的背景顏色。

printCanvas (renderer.domElement.toDataURL ("image/png"), width, height, 
    function (url) { window.open (url, '_blank'); }); 

// from THREEx.screenshot.js 
function printCanvas (srcUrl, dstW, dstH, callback) 
{ 
    // to compute the width/height while keeping aspect 
    var cpuScaleAspect = function (maxW, maxH, curW, curH) 
    { 
     var ratio = curH/curW; 
     if (curW >= maxW && ratio <= 1) 
     { 
      curW = maxW; 
      curH = maxW * ratio; 
     } 
     else if (curH >= maxH) 
     { 
      curH = maxH; 
      curW = maxH/ratio; 
     } 

     return { width: curW, height: curH }; 
    } 

    // callback once the image is loaded 
    var onLoad = function() 
    { 
     // init the canvas 
     var canvas = document.createElement ('canvas'); 
     canvas.width = dstW; 
     canvas.height = dstH; 

     var context = canvas.getContext ('2d'); 
     context.fillStyle = "black"; 
     context.fillRect (0, 0, canvas.width, canvas.height); 

     // scale the image while preserving the aspect 
     var scaled = cpuScaleAspect (canvas.width, canvas.height, image.width, image.height); 

     // actually draw the image on canvas 
     var offsetX = (canvas.width - scaled.width)/2; 
     var offsetY = (canvas.height - scaled.height)/2; 
     context.drawImage (image, offsetX, offsetY, scaled.width, scaled.height); 

     // notify the url to the caller 
     callback && callback (canvas.toDataURL ("image/png")); // dump the canvas to an URL   
    } 

    // Create new Image object 
    var image = new Image(); 
    image.onload = onLoad; 
    image.src = srcUrl; 
}