<!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. 创建一个与a.txt文件同目录下的另一个文件b.txt

    File file1 = new("d:\\a\\a.txt"); File file2 = new(file1.getParent(),"b.txt"): F ...

  2. 用 yaml 写测试用例

    采用 excel 的方式写测试用例,格式比较死板,比较容易出错,采用 yaml / yml 格式来写用例. 首先安装 pyyaml:pip install pyyaml 建立一个 login.yaml ...

  3. IBM免费服务器试用

    IBM公司的免费资源,仅需一个邮箱就可以注册申请,注册可以有60天试用期. 1.注册 点击 注册进入IBM教育资源官网进行注册,注册时仅需要一个有效邮箱,QQ,Gmail,outlook均可. 注册邮 ...

  4. 20203412马畅若 实验三 《Python程序设计》Socket编程技术实验报告

    实验三 Socket编程技术 课程:<Python程序设计>班级: 2034姓名: 马畅若学号:20203412实验教师:王志强实验日期:2020年5月30日必修/选修: 公选课 ##1. ...

  5. 使用ts二次封装storage(sessionStorage/localStorage)

    export class LocalCache { setCache<T = any>(key: string, value: T): boolean; setCache<T = a ...

  6. 解决Google翻译不能用的问题

    解决Google翻译不能用的问题   1.打开C:\Windows\System32\drivers\etc\hosts 2.在hosts后面加入 203.208.40.66 translate.go ...

  7. 2.mysql存储过程、存储函数与触发器

    -- 创建一个存储过程DELIMITER $CREATE PROCEDURE 存储过程名称(返回类型 参数名1 参数类型1, ....) [ ...... ]BEGIN -- 具体组成存储过程的SQL ...

  8. 第二周day6

    第二周day6,星期六 所花时间:0 代码量:0 搏客量:1 了解到的知识点:多锻炼.

  9. 关于ecplipse中的中文都成乱码的问题

    这个问题之前也搞死我了,差不多搞了两个下午才搞好 唉,说多了都是泪 时间过的有点久,不是很记得了,不过我这个问题是装fx包之前发生的,后来我是改了jdk版本的所以可能会有些不同 首先,中文会变成乱码主 ...

  10. git常见问题集合

    注1:问题总结来自于实际使用,关于搜到的资料链接一并粘贴; 场景1:GIT本地代码处于detached HEAD的情况(又称游离状态)的解决办法; 问题:有时候git由于一些操作的问题出现了detac ...