<!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. 【Frida】调试js代码

    方法一attach启动 js代码动态注入app,app需要保持运行状态 # coding: utf-8 import sys import frida app_name = "猿人学APP& ...

  2. IDEA隐藏.idea

  3. mysql中的InnoDB和MyISAM

    InnoDB:支持事务,支持表级锁,行级锁,支持外键,是非聚集索引. MyISAM:不支持事务,支持表级锁,不支持外键,聚集索引. 聚集索引和非聚集索引的区别:InnoDB是聚集索引,使用B+Tree ...

  4. pytest（5）-自定义用例顺序(pytest-ordering)-后续学习

    前言 测试用例在设计的时候,我们一般要求不要有先后顺序,用例是可以打乱了执行的,这样才能达到测试的效果. 有些同学在写用例的时候,用例写了先后顺序, 有先后顺序后,后面还会有新的问题(如:上个用例返回 ...

  5. nginx添加ssl模块

    一.在安装时添加ssl模块1.进入源码包做在的目录,进行编译,编译时添加参数–with-http_stub_status_module --with-http_ssl_module cd /usr/l ...

  6. 22_webpack_优化

    Terser是一个JS的解析(Parser).Mangleer(绞肉机).Compresor(压缩机)的工具 绞肉机如:一个函数 function functionsWithLongNames(){ ...

  7. windows terminal用ssh连接已重装的服务器提示REMOTE HOST IDENTIFICATION HAS CHANGED!

    连接过程提示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE HOST IDENTIFIC ...

  8. 6.mysql优化案例

    1.单表优化:  进行优化: 删除原来的三个字段的索引,创建二个字段的索引: 2.两表关联: 左连接,在右表创建索引   右连接,在左表创建索引: 3.三表关联:左关联全都在右表创建索引:

  9. uniapp打包app出现HTML5+ Runtime

    在manifest.json->源码视图的 "app-plus"下面添加: "app-plus" : { "compatible" : ...

  10. EMQX 在 Kubernetes 中如何进行优雅升级

    背景 为了降低 EMQX 在 Kubernetes 上的部署.运维成本,我们将一些日常运维能力进行总结.抽象并整合到代码中,以 EMQX Kubernetes Operator 的方式帮助用户实现 E ...