Search code examples
three.jswebglscreenshotdat.gui

WebGL single frame "screenshot" of webGL

tried searching for something like this, but I've had no luck. I'm trying to open a new tab with a screenshot of the current state of my webgl image. Basically, it's a 3d model, with the ability to change which objects are displayed, the color of those objects, and the background color. Currently, I am using the following:

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

This line succeeds in opening a new tab with a current image of my model, but does not display the current background color. It also does not properly display the tab name. Instead, the tab name is always "PNG 1024x768".

Is there a way to change my window.open such that the background color is shown? The proper tab name would be great as well, but the background color is my biggest concern.

Solution

  • If you open the window with no URL you can access it's entire DOM directly from the JavaScript that opened the window.

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

    You can then set or add anything you want

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

    And add the screenshot

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