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; 
}