Question

尝试搜索这样的东西，但我没有运气。我正在尝试打开一个新标签，其中包含我的webgl图像当前状态的屏幕截图。基本上，它是一个三维模型，能够更改显示的对象，这些对象的颜色和背景颜色。目前，我使用以下内容：

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

WebGL单帧“webGL的截图”

2 个答案: