Question

我正在使用一个名为cesium的网站，它向我展示了世界的一个地球，它使用了html5。基本上我想保存我在屏幕上看到的所有内容，我是html5 / javascript的新手......

每当我试图保存画布时，它一直向我显示一个空白的黑屏。我想这可能是因为画布还没有完成加载所以我把它放在一个onload函数中。还尝试使用计时器从脚本中保存，直到加载完毕。

window.onload = function(){
    var scene = viewer.scene;
    var canvas = scene.canvas;
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
    window.location.href=image;
}

我还读到它可能与CORS（跨源资源共享）有关，但我没有收到任何错误。对不起，我知道有人问过，但我是html5的新手，其他解决方案对我没有帮助。

编辑：

感谢您的帮助，因为我是新手，我花了很多时间试图理解它，甚至在铯论坛上得到回应。我希望你能帮助我理解这个问题......

require(['Cesium'], function(Cesium) {
    "use strict";

    // Cesium.CesiumWidget is similar to Cesium.Viewer, but
    // is trimmed down.  It is just a widget for the 3D globe;
    // it does not include the animation, imagery selection,
    // and other widgets, nor does it depend on the third-party
    // Knockout library.
    var widget = new Cesium.CesiumWidget('cesiumContainer',
        {
        contextOptions:{webgl:{preserveDrawingBuffer : true}
                           }});
    var scene = widget.scene;   

    var canvas = scene.canvas;
    var dataUrl = canvas.toDataURL("image/png");
    window.open(dataUrl,'Screenshot','toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes');
    Sandcastle.finishedLoading();
});

这是我的代码，我将preserveDrawingBuffer设置为true但我仍然得到一张空白图片，铯论坛告诉我这个

We capture the WebGL canvas on a couple of projects including Doarama.  You need to initialize the WebGL context with preserveDrawingBuffer enabled before capturing.  This can be done in Cesium like this...

  var scene = new Cesium.Scene(canvas, {
    webgl : {
      preserveDrawingBuffer : true
    }
  }, creditContainer);

Answer 1

编辑：

你是对的，方法toDataURL是一个canvas方法，所以它独立于我们正在使用的上下文。我发布的剪辑（我将在帖子的最后留下）我用它来组成我所拥有的各个层。

我刚刚在这里进行了测试，toDataURL在设置preserveDrawingBuffer: true后才能正常工作。

gl = canvas.getContext("experimental-webgl",{preserveDrawingBuffer:true});

这是诀窍的一部分。假设您无法修改代码，并且您只能获取上下文一次。您可以使用新上下文覆盖分配给上下文的变量，但现在使用此参数。我还没有在celsium上试过这个，但是它在this example中工作了。

不幸的是，我现在没时间找到铯获取上下文的位置，如果它只获得一次。虽然，我能够追踪背景和创造＆＃39;到：

this._originalGLContext=i.getContext("webgl",s)||i.getContext("experimental-webgl",s);
this._gl=this._originalGLContext;

无论如何，我希望您可以访问代码，只需添加preserveDrawingBuffer参数。

var dataUrl = document.getElementById("webglCanvas").toDataURL("image/png");
window.open(dataUrl,'Screenshot','toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes');

Answer 2

我认识到这个问题现在已经过时了，但我遇到了同样的问题并遇到了解决方案。初始化Viewer时，您可以直接将选项传递给preserveDrawingBuffer，如下所示：

viewer=new Cesium.Viewer('cesiumContainer',{
    contextOptions: {
        webgl:{preserveDrawingBuffer:true}
    }
});

这将为您提供所需的行为。

试图保存html5画布，但它的空白

2 个答案: