<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>导出图片</title>

    <script src="/static/Cesium/Cesium.js"></script>

    <link rel="stylesheet" href="/static/Cesium/Widgets/widgets.css">

    <style>

        html,

        body,

        #csiumContain {

            width: 100%;

            height: 100%;

            margin: 0px;

        }

        .cesium-widget-credits {

            display: none !important;

            /*去除Cesium默认版权信息*/

        }

        .tool-bar {

            position: absolute;

            top: 1vh;

            left: 2vw;

            z-index: 999999;

        }

        .cesium-viewer-infoBoxContainer {

            display: none !important;

        }

    </style>

</head>

<body>

    <div id="toolbar" class="param-container tool-bar layui-form-item">

        <button  onclick="saveToFile()">场景出图</button>

    </div>

    <div id="csiumContain"></div>

</body>

<script>

    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);

    var viewer = new Cesium.Viewer("csiumContain", {

        homeButton: false,//是否显示Home按钮

        animation: false,//是否显示动画控件

        timeline: false,//是否显示时间线控件

        fullscreenButton: false,

        baseLayerPicker: false,//是否显示图层选择控件

        sceneModePicker: true, //是否显示投影方式控件

        navigationHelpButton: false, //是否显示帮助信息控件

        geocoder: false, //是否显示地名查找控件

        sceneModePicker: false,//是否显示3D/2D选择器

        contextOptions: {

            webgl: {

                alpha: true,

                depth: true,

                stencil: true,

                antialias: true,

                premultipliedAlpha: true,

                //通过canvas.toDataURL()实现截图需要将该项设置为true

                preserveDrawingBuffer: true,

                failIfMajorPerformanceCaveat: true

            }

        }

    })

    function saveToFile() {

        let canvas = viewer.scene.canvas;

        let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

        let link = document.createElement("a");

        let blob = dataURLtoBlob(image);

        let objurl = URL.createObjectURL(blob);

        link.download = "scene.png";

        link.href = objurl;

        link.click();

    }

    function dataURLtoBlob(dataurl) {

        let arr = dataurl.split(','),

            mime = arr[0].match(/:(.*?);/)[1],

            bstr = atob(arr[1]),

            n = bstr.length,

            u8arr = new Uint8Array(n);

        while (n--) {

            u8arr[n] = bstr.charCodeAt(n);

        }

        return new Blob([u8arr], { type: mime });

    }

</script>

</html>

点击按钮即可按照浏览器的下载路径保存

在cesium中导出图片的更多相关文章

  1. 从sql中image类型字段中导出图片

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  2. 从word中导出图片

    想把word里面的图片导出来,可以这么操作: 1.右键word里面的图片,复制 2.打开电脑的画图工具,粘贴,然后保存

  3. Excel催化剂开源第45波-按原图大小导出图片

    从Excel中导出图片,是一个很常规的需求,也有一些久旧不衰的界面操作法小技巧从OpenXml文件中批量导出,在VBA开发中,也会使用Chart对象的背景图的技巧来导出.总体来说,和真正想要的效果还是 ...

  4. 如何将Matlab中“模糊控制设计器”的隶属度函数导出图片（figure）

    如何将Matlab中"模糊控制设计器"的隶属度函数导出图片(figure)详情参考matlab官方帮助手册:plotmf()函数https://www.mathworks.com/ ...

  5. 【.net 深呼吸】导出 Office 文档中的图片

    我们常用的 Office 文档其实就三种——Word.Excel.PowerPoint,分别对应的扩展名为:.docx..pptx..xlsx. 许多教程都告诉我们,要提取这些文件中的图片(其实像视频 ...

  6. C#向PPT文档插入图片以及导出图片

    PowerPoint演示文稿是我们日常工作中常用的办公软件之一,而图片则是PowerPoint文档的重要组成部分,那么如何向幻灯片插入图片以及导出图片呢?本文我将给大家分享如何使用一个免费版Power ...

  7. .net 下新版highcharts本地导出图片bug处理

    最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...

  8. Asp.net通过模板(.dot/Html)导出Word，同时导出图片

    一.Office组件导出Word(服务器配置麻烦) 需要引用Office的DLL,在下文的附件中,不同的Offic版本用的不一样,虽然高级版本可以兼容低级的,不过,还是统一版本最好 贴上核心代码(转载 ...

  9. java POI实现向Excel中插入图片

          做Web开发免不了要与Excel打交道.今天老大给我一个任务-导出Excel.开始想的还是蛮简单的,无非就是查找,构建Excel,response下载即可.但是有一点不同,就是要加入图片, ...

  10. FusionCharts V3图表导出图片和PDF属性说明（转）

    百闻不如一见,狠狠点击,快快下载:(演示文档有错误,不提供下载了.待新的演示文档出来.) 许多朋友说上面的DEMO用不了.fusioncharts官方的演示非常不错,就是来不及整理,各位大侠们可以研究 ...

随机推荐

  1. 【微信公众号】记一次微信活动微信公众号分享没有LOGO的解决心路历程

    微信类的活动测过好几次了,以前的开发从来没有出过纰漏,这次也以为很简单.结果一个"分享后没有LOGO的问题",前端开发陆陆续续花了一周时间都不能解决,老是找后端和微信公众号配置问题 ...

  2. 内网Linux下安装Nginx1.23，添加stream模块实现tcp/udp代理转发

    环境:centos7.6 ngx_stream_core_module 这个模块在1.9.0版本后将被启用.但是并不会默认安装,需要在编译时通过指定 --with-stream 参数来激活这个模块,w ...

  3. mxArray 和 mwArray 的区别

    首先,mxArray是MatlabC 函数库的结构体,而mwArray是Matlab C++ 函数库中对mxArray的包装 类. 其次,二者的内存管理方式不同.mxArray的内存管理方式比较松散, ...

  4. Mac下配置Groovy

    官网:http://www.groovy-lang.org/ Step 1:下载Groovy 地址:https://groovy.apache.org/download.html 下载后解压 Step ...

  5. Py_excel

    py_excel xlrd 读excel workbook = xlrd.open_workbook(file_path) sheet = workbook.sheet_by_name(sheet_n ...

  6. appium+python测试Android真机功能报错处理

    用Appium1.4.16.1测试Android8.1.0出现以下报错: C:\ProgramData\Anaconda3\python.exe D:/python/appium_learn/calc ...

  7. tensorflow-gpu安装遇到的坑

    tensorflow-gpu安装好导入,一直出现以下错误 折腾了好久. 错误之前也按照中国官网安装及配置各环境变量:https://tensorflow.google.cn/install/gpu 其 ...

  8. 统信系统部署es

    rpm -ivh jdk-17.0.4.1_linux-x64_bin.rpm groupadd es && useradd -d /home/es -g es estar -xzvf ...

  9. OSPF的安全认证

    OSPF的安全认证 OSPF通过LSA报文同步状态信息,协议根据LSA提供的状态信息,快速实行全网路由的建立.也就是一通百通,一变则变.坏处就是有人搞破坏,一坏则百坏.为防止网络破坏活动,实行认证(明 ...

  10. 动态规划-1-钢条切割（Dynamic Programming-1-rod cutting）

    1 #include <stdio.h> 2 #define LEN 10 3 #define NEGINF -999999 4 struct r_d { 5 int r; //profi ...