<!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. python + QML程序中调用WebView后打包

    QML中如果加入了WebView控件,在用pyinstaller打包时不会自动导入,从而导致打包出的程序运行报错,no WebView plugin found,此时需要手动将WebView控件复制到 ...

  2. java 注解基础

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

  3. linux服务器连接数查询

    linux服务器环境检查 CPU.内存使用情况 查看系统整体执行情况 命令执行 # 查看当前系统正在执行的进程的相关信息,包括进程ID.内存占用率.CPU占用率等 top # 返回结果 # 14:06 ...

  4. 【Java】BigDecimal

    BigDecimal转int类型 BigDecimal a=new BigDecimal(12.88); int b=a.intValue(); System.out.println(b);//b=1 ...

  5. 主页面调取iframe子页面的子页面数据

    iframe = this.iframe.contentWindow; var rowsData = iframe.$("#sonList2")[0].contentWindow. ...

  6. Selenium私房菜系列9 -- Selenium RC服务器命令行参数列表【VV】

    使用示例: java -jar selenium-server.jar [-interactive] [options] -port <nnnn>: selenium服务器使用的端口号(默 ...

  7. RN 报错信息总结

    我使用的是 VScode 编辑器,有时候,卸载包,安装包就会编译失败,解决方式 gradlew clean 编译错误 Execution failed for task ':app:compileDe ...

  8. SpringBoot + Quartz 集成

    Quartz 应用启动加载集群配置 @Bean 注解交由 Spring BeanFactory 容器管理 @Bean public JobDetailFactoryBean testJobDetail ...

  9. 数字成像系统—ISP

    ISP是什么Image Signal Processor,图像信号处理器.作用:处理Image Sensor(图像传感器)的输出数据.对前端图像传感器输出的信号做后期处理.如AWB等.DSP是什么Di ...

  10. qt5 windeployqt.exe 部署后的程序，运行时仍然报错的问题 （无法定位程序输入点 _ZdlPvj）

    首先,注意自己编译执行程序所用的Qt版本: 上图 QTDIR 其次,部署后的执行程序运行时需要 libgcc_s_dw2-1.dll ,从对应的 QT目录拷一个. 最后,要在Qt自己的命令行下运行 w ...