<!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. shardingsphere 5.0.0

    pom <dependency> <groupId>org.apache.shardingsphere</groupId> <artifactId>sh ...

  2. 狄利克雷过程(Dirichlet Process）

    先从狄利克雷过程的motivation开始说起,如果我们有一些数据,这些数据是从几个高斯分布中得出的,也就是混合高斯模型中得出的,比如下图这样 但是呢,我们并不知道混合高斯模型中到底有多少个高斯分布, ...

  3. vue、iview、VeeValidate 表单验证完整

    1.main.js (1).安装vee-validate npm install vee-validate --save (2).安装vue-i18n npm install vue-i18n --s ...

  4. Cannot read properties of null (reading ‘insertBefore‘)

    一.报错现象 vue3 + element plus 项目,本地启动时,页面进行所有操作都正常:部署到test环境后,数据驱动DOM变化的操作会导致如下报错. 二.可能原因及解决方案 经过分析出现报错 ...

  5. 在TMOS系统中添加按键检测功能

    目录 TMOS系统中自带有按键检测轮询功能,默认100ms检测一次,在debug时很有帮助.不过在需要低功耗休眠的前提下,检测按键需要频繁唤醒,影响功耗,故多数BLE的工程都没有用到这个功能.代码贴在 ...

  6. java 注解基础

    java 内置注解 注解 作用 描述 @Override 将覆盖父类中的方法 作用在子类的方法上 @Deprecated 代码被弃用 使用了被@Deprecated注解的代码则编译器将发出警告 @Su ...

  7. npm升级报错,没有权限.ERRERR!The operation was rejected by your operating system. npm ERR!Error: EPERM: operation not permitted, rename

    问题描述 Windows system32>npm installg npm 2335 error code EEXIST2336 error path D:\Program Files\nod ...

  8. linux与windows互通

    https://www.cnblogs.com/zhouby/p/10724149.html

  9. Nginx教程由浅入深

    Nginx   一.安装Nginx 1.准备工作 (1)打开虚拟机,使用远程连接工具连接 linux 操作系统 (2)到 nginx 官网下载软件 http://nginx.org/ 2.开始进行 n ...

  10. 13-之容器资源需求、资源限制及Metric-server(Heapster)

    目录 容器资源需求.资源限制及Heapster Heapster 资源指标API及自定义指标API k8s-promtheus监控部署 node-exporter prometheus kube-st ...