首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >WebGL的webGL单帧“截图”

WebGL的webGL单帧“截图”
EN

Stack Overflow用户
提问于 2013-05-08 09:41:05
回答 2查看 8K关注 0票数 2

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

代码语言:javascript
运行
复制
var screenShot = window.open(renderer.domElement.toDataURL("image/png"), 'DNA_Screen');

这一行成功地打开了一个带有我的模型的当前图像的新选项卡,但不显示当前的背景色。它也不能正确显示选项卡名称。相反,选项卡名始终是"PNG 1024x768“。

有没有办法改变我的window.open,让背景颜色显示出来?正确的标签名称也很好,但背景颜色是我最关心的问题。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-05-09 03:03:24

如果在没有URL的情况下打开窗口,则可以直接从打开窗口的JavaScript访问整个DOM。

代码语言:javascript
运行
复制
var w = window.open('', '');

然后,您可以设置或添加所需的任何内容

代码语言:javascript
运行
复制
w.document.title = "DNA_screen";
w.document.body.style.backgroundColor = "red";

并添加屏幕截图

代码语言:javascript
运行
复制
var img = new Image();
img.src = someCanvas.toDataURL();
w.document.body.appendChild(img);
票数 4
EN

Stack Overflow用户

发布于 2013-05-08 13:55:48

它比你的单行要长得多,但是你可以改变上下文矩形的背景颜色。

代码语言:javascript
运行
复制
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;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16431318

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档