2

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

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

此行成功使用我的模型的当前图像打开一个新选项卡，但不显示当前背景颜色。它也无法正确显示选项卡名称。相反，选项卡名称始终为“PNG 1024x768”。

有没有办法改变我的 window.open 以显示背景颜色？正确的选项卡名称也很好，但背景颜色是我最关心的问题。

4

2 回答 2

4

如果您打开没有 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);
于 2013-05-08T19:03:23.587 回答
0

好吧，它比你的一个衬里长得多，但你可以更改上下文矩形的背景颜色。

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;
}
于 2013-05-08T05:55:48.113 回答