cesium实现截屏保存图片路程

1.首先需要引入插件canvas2image.js用来将canvas转图片

cesium也是基于canvas容器实现webgl，canvas可以直接将内容保存成图片：canvas2image。我们只需要获取到cesium的容器canvas就可以直接保存为图片了： 

var canvas = viewer.scene.canvas;

 var genimg = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height , 'png');

 var image = document.getElementById('image');

 image.src = genimg.src;

2.运行控制台报错：Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

分析：因为infoBox是Ifram框架，H5的新安全机制不允许在其中执行脚本，如果在里面写了类似于点击事件的脚本，则会提示如下错误：

解决方法有两个：

     1.禁用infobox，自己设计信息面板。

     2.设置沙箱的权限

var iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];

iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms'); 

3.结果运行无法得到场景截图，是空白：

场景截图需要开启：preserveDrawingBuffer。

viewer初始化设置：

contextOptions: {
            //cesium状态下允许canvas转图片convertToImage
          webgl: {
              alpha: true,
              depth: false,
              stencil: true,
              antialias: true,
              premultipliedAlpha: true,
              preserveDrawingBuffer: true,
              failIfMajorPerformanceCaveat: true
          },
          allowTextureFilterAnisotropic: true
        },

之后便可以将截屏保存到标签img中

4.想要将截屏下载到本地

 /**
     * 在本地进行文件保存
     * @param  {String} data     要保存到本地的图片数据（img的src）
     * @param  {String} filename 文件名
     */
    var saveFile = function(data, filename){
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };

5.若需要将除cesium以外的dom加入到截屏中，需要借助html2canvas插件来实现，引入html2canvas

将第1步替换：

var test = $("body").get(0); //将jQuery对象转换为dom对象
    // 点击转成canvas
    $('#btn').click(function(e) {
        // 调用html2canvas插件
        html2canvas(test).then(function(canvas) {
            // canvas宽度
            var canvasWidth = canvas.width;
            // canvas高度
            var canvasHeight = canvas.height;

                // 调用Canvas2Image插件转图片
            var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
            var image = document.getElementById('image');
            //保存到img标签中
            image.src = img.src;

            // 调用保存到本地的方法下载图片
            saveFile(image.src, "aa.png")
        });
    });