cesium-场景出图场景截屏导出图片或pdf

cesium把当前的场景截图，下载图片或pdf

安装

npm install canvas2image --save
npm i jspdf -S

如果安装的插件Canvas2Image不好用，可自建js

Canvas2Image.js
/*** covert canvas to image* and save the image file*/
const Canvas2Image = (function () {// check if support sth.const $support = (function () {const canvas = document.createElement("canvas"),ctx = canvas.getContext("2d");return {canvas: !!ctx,imageData: !!ctx.getImageData,dataURL: !!canvas.toDataURL,btoa: !!window.btoa,};})();const downloadMime = "image/octet-stream";function scaleCanvas(canvas, width, height) {const w = canvas.width,h = canvas.height;if (width === undefined) {width = w;}if (height === undefined) {height = h;}let retCanvas = document.createElement("canvas");let retCtx = retCanvas.getContext("2d");retCanvas.width = width;retCanvas.height = height;retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);return retCanvas;}function getDataURL(canvas, type, width, height) {canvas = scaleCanvas(canvas, width, height);return canvas.toDataURL(type);}// save file to local with file name and file typefunction saveFile(strData, fileType, fileName = "name") {// document.location.href = strData;let saveLink = document.createElement("a");// download file namesaveLink.download = fileName + "." + fileType;// download file datasaveLink.href = strData;// start downloadsaveLink.click();}function genImage(strData) {let img = document.createElement("img");img.src = strData;return img;}function fixType(type) {type = type.toLowerCase().replace(/jpg/i, "jpeg");const r = type.match(/png|jpeg|bmp|gif/)[0];return "image/" + r;}function encodeData(data) {if (!window.btoa) {// eslint-disable-next-line no-throw-literalthrow "btoa undefined";}let str = "";if (typeof data == "string") {str = data;} else {for (let i = 0; i < data.length; i++) {str += String.fromCharCode(data[i]);}}return btoa(str);}function getImageData(canvas) {const w = canvas.width,h = canvas.height;return canvas.getContext("2d").getImageData(0, 0, w, h);}function makeURI(strData, type) {return "data:" + type + ";base64," + strData;}/*** create bitmap image* 按照规则生成图片响应头和响应体*/const genBitmapImage = function (oData) {//// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx//const biWidth = oData.width;const biHeight = oData.height;const biSizeImage = biWidth * biHeight * 3;const bfSize = biSizeImage + 54; // total header size = 54 bytes////  typedef struct tagBITMAPFILEHEADER {//  	WORD bfType;//  	DWORD bfSize;//  	WORD bfReserved1;//  	WORD bfReserved2;//  	DWORD bfOffBits;//  } BITMAPFILEHEADER;//const BITMAPFILEHEADER = [// WORD bfType -- The file type signature; must be "BM"0x42,0x4d,// DWORD bfSize -- The size, in bytes, of the bitmap filebfSize & 0xff,(bfSize >> 8) & 0xff,(bfSize >> 16) & 0xff,(bfSize >> 24) & 0xff,// WORD bfReserved1 -- Reserved; must be zero0,0,// WORD bfReserved2 -- Reserved; must be zero0,0,// DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.54,0,0,0,];////  typedef struct tagBITMAPINFOHEADER {//  	DWORD biSize;//  	LONG  biWidth;//  	LONG  biHeight;//  	WORD  biPlanes;//  	WORD  biBitCount;//  	DWORD biCompression;//  	DWORD biSizeImage;//  	LONG  biXPelsPerMeter;//  	LONG  biYPelsPerMeter;//  	DWORD biClrUsed;//  	DWORD biClrImportant;//  } BITMAPINFOHEADER, *PBITMAPINFOHEADER;//const BITMAPINFOHEADER = [// DWORD biSize -- The number of bytes required by the structure40,0,0,0,// LONG biWidth -- The width of the bitmap, in pixelsbiWidth & 0xff,(biWidth >> 8) & 0xff,(biWidth >> 16) & 0xff,(biWidth >> 24) & 0xff,// LONG biHeight -- The height of the bitmap, in pixelsbiHeight & 0xff,(biHeight >> 8) & 0xff,(biHeight >> 16) & 0xff,(biHeight >> 24) & 0xff,// WORD biPlanes -- The number of planes for the target device. This value must be set to 11,0,// WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap// has a maximum of 2^24 colors (16777216, Truecolor)24,0,// DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed0,0,0,0,// DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmapsbiSizeImage & 0xff,(biSizeImage >> 8) & 0xff,(biSizeImage >> 16) & 0xff,(biSizeImage >> 24) & 0xff,// LONG biXPelsPerMeter, unused0,0,0,0,// LONG biYPelsPerMeter, unused0,0,0,0,// DWORD biClrUsed, the number of color indexes of palette, unused0,0,0,0,// DWORD biClrImportant, unused0,0,0,0,];const iPadding = (4 - ((biWidth * 3) % 4)) % 4;const aImgData = oData.data;let strPixelData = "";const biWidth4 = biWidth << 2;let y = biHeight;const fromCharCode = String.fromCharCode;do {const iOffsetY = biWidth4 * (y - 1);let strPixelRow = "";for (let x = 0; x < biWidth; x++) {const iOffsetX = x << 2;strPixelRow +=fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) +fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) +fromCharCode(aImgData[iOffsetY + iOffsetX]);}for (let c = 0; c < iPadding; c++) {strPixelRow += String.fromCharCode(0);}strPixelData += strPixelRow;} while (--y);return (encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) +encodeData(strPixelData));};/*** saveAsImage* @param canvas canvasElement* @param width {String} image type* @param height {Number} [optional] png width* @param type {string} [optional] png height* @param fileName {String} image name*/const saveAsImage = function (canvas, width, height, type, fileName) {// save file typeconst fileType = type;if ($support.canvas && $support.dataURL) {if (typeof canvas == "string") {canvas = document.getElementById(canvas);}if (type === undefined) {type = "png";}type = fixType(type);if (/bmp/.test(type)) {const data = getImageData(scaleCanvas(canvas, width, height));const strData = genBitmapImage(data);// use new parameter: fileTypesaveFile(makeURI(strData, downloadMime), fileType, fileName);} else {const strData = getDataURL(canvas, type, width, height);// use new parameter: fileTypesaveFile(strData.replace(type, downloadMime), fileType, fileName);}}};const convertToImage = function (canvas, width, height, type) {if ($support.canvas && $support.dataURL) {if (typeof canvas == "string") {canvas = document.getElementById(canvas);}if (type === undefined) {type = "png";}type = fixType(type);if (/bmp/.test(type)) {const data = getImageData(scaleCanvas(canvas, width, height));const strData = genBitmapImage(data);return genImage(makeURI(strData, "image/bmp"));} else {const strData = getDataURL(canvas, type, width, height);return genImage(strData);}}};return {saveAsImage: saveAsImage,saveAsPNG: function (canvas, width, height, fileName) {return saveAsImage(canvas, width, height, "png", fileName);},saveAsJPEG: function (canvas, width, height, fileName) {return saveAsImage(canvas, width, height, "jpeg", fileName);},saveAsGIF: function (canvas, width, height, fileName) {return saveAsImage(canvas, width, height, "gif", fileName);},saveAsBMP: function (canvas, width, height, fileName) {return saveAsImage(canvas, width, height, "bmp", fileName);},convertToImage: convertToImage,convertToPNG: function (canvas, width, height) {return convertToImage(canvas, width, height, "png");},convertToJPEG: function (canvas, width, height) {return convertToImage(canvas, width, height, "jpeg");},convertToGIF: function (canvas, width, height) {return convertToImage(canvas, width, height, "gif");},convertToBMP: function (canvas, width, height) {return convertToImage(canvas, width, height, "bmp");},};
})();// Export function, used in npm
export default Canvas2Image;

全部代码如下

<template><div id="cesiumContainer" style="height: 100vh;"></div><div id="toolbar" style="position: fixed;top:20px;left:220px;"><el-breadcrumb><el-breadcrumb-item>场景设置实例</el-breadcrumb-item><el-breadcrumb-item>场景出图</el-breadcrumb-item></el-breadcrumb><el-row class="mb-4" style="margin-top: 15px"><el-button type="primary" @click="downSceneImg">图片</el-button><el-button type="primary" @click="downScenePdf">pdf</el-button></el-row></div>
</template>
<script>
import * as Cesium from "cesium";
import InitCesiumHide from "../js/InitCesiumHide.js";
import canvas2image from '../js/canvas2image.js';
import JsPDF from 'jspdf';export default {name: 'cesium24002',data() {return {viewer: undefined,scene: undefined}},mounted() {let initCesium = new InitCesiumHide('cesiumContainer')this.viewer = initCesium.initViewer({//cesium状态下允许canvas转图片convertToImagecontextOptions: {webgl: {alpha: true,depth: false,stencil: true,antialias: true,premultipliedAlpha: true,preserveDrawingBuffer: true,failIfMajorPerformanceCaveat: true},allowTextureFilterAnisotropic: true}});//去除版权信息this.viewer._cesiumWidget._creditContainer.style.display = "none";this.scene = this.viewer.scene;this.flyToRight2();},methods: {flyToRight2() {let camera = this.viewer.scene.camera;camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(115.2766, 36.5522, 803.34),/*complete: function () {setTimeout(function () {camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(115.2766, 36.5522, 356.50838555841779),orientation: {heading: Cesium.Math.toRadians(150.0),pitch: Cesium.Math.toRadians(-30.0)},easingFunction: Cesium.EasingFunction.LINEAR_NONE});}, 1000);}*/});},downSceneImg() {let canvas = this.viewer.scene.canvas;let imageWidth = 1000;let img = canvas2image.convertToImage(canvas, imageWidth, imageWidth * canvas.height / canvas.width, 'png');let loadImg = document.createElement('a')loadImg.href = img.srcloadImg.download = 'scene'loadImg.click()},downScenePdf() {let canvas = this.viewer.scene.canvas;let imageWidth = 1000;let imageHeight = imageWidth * canvas.height / canvas.width;let img = canvas2image.convertToImage(canvas, imageWidth, imageHeight, 'png');let PDF = new JsPDF('', 'pt', 'a4');PDF.addImage(img, 'png', 0, 0, imageWidth, imageHeight);PDF.save('scene.pdf')}/*,downSceneImg() {this.viewer.render();this.viewer.canvas.toDataURL("image/png");let canvas = this.viewer.scene.canvas;//只需要定义图片的宽度（高度计算得到）let imageWidth = 500;//保存（下载）图片Canvas2image.saveAsImage(canvas, imageWidth, imageWidth * canvas.height / canvas.width, 'png');//转换图片let genimg = Canvas2image.convertToImage(canvas, imageWidth, imageWidth * canvas.height / canvas.width, 'png');let image = document.getElementById('image');image.src = genimg.src;}*/}
}
</script>
<style>
.el-breadcrumb__inner {color: #ffffff !important;
}
</style>

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/663831.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

无人机激光雷达标定板

无人机激光雷达标定板

机载激光雷达标定板是用于校准和验证机载激光雷达系统的设备。由于机载激光雷达系统在测量地形、建筑物和植被等方面具有广泛的应用&#xff0c;因此标定板的使用对于确保测量结果的准确性和可靠性至关重要。 标定板通常由高反射率的材料制成&#xff0c;如镀金的玻璃或陶瓷&am…
阅读更多...
计算机网络实验五

计算机网络实验五

目录 实验五 路由器基本配置 1、实验目的 2、实验设备 3、网络拓扑及IP地址分配 4、实验过程 &#xff08;1&#xff09;路由器设备名称的配置 &#xff08;2&#xff09;路由器每日提示信息配置 &#xff08;3&#xff09;路由器端口的IP地址配置 &#xff08;4&…
阅读更多...
Docker 阿里云镜像仓库CR使用实践

Docker 阿里云镜像仓库CR使用实践

一、使用容器镜像&#xff0c;查看镜像&#xff0c;创建&#xff0c;推送&#xff0c;拉取阿里云镜像 CR镜像管理&#xff08;阿里云容器镜像服务&#xff08;Container Registry&#xff09;&#xff09; 登录实例 未创建的镜像名称也可以push、docker的私有仓库需要提起创建…
阅读更多...
微信小程序新手入门教程二：认识JSON配置文件

微信小程序新手入门教程二：认识JSON配置文件

在上一篇我们介绍了微信小程序的注册和基本使用方式&#xff0c;并且写出了一个简单的页面&#xff0c;但是依然没有解释目录中的各种.json文件是做什么的。这篇我们就来认识一下各种JSON配置文件及其配置项。 一 认识JSON 首先先来认识一下JSON是什么。 JSON 指的是 JavaScri…
阅读更多...
航道大数据应用专项研究报告（附下载）

航道大数据应用专项研究报告（附下载）

总体目标 充分认识航道大数据对行业治理的重要性和必要性&#xff0c;航道大数据的开发和利用是建设智慧航道的基础。基于大数据的航道管理体系&#xff0c;实现了现有数据的梳理和汇聚&#xff0c;跨部门数据的交换和整合&#xff0c;建立了数据关联和深度学习的模型机制&…
阅读更多...
网络异常案例六_IP冲突

网络异常案例六_IP冲突

问题现象 同一个局域网下&#xff0c;一个路由器带几十台终端设备&#xff0c;存在终端设备获取到了相同IP的场景。该路由器也是DHCP Server。 有两个设备终端&#xff0c;都显示获取到了192.168.11.177这个ip。 抓包分析 抓包过程中&#xff0c;看到的一些问题。 ps&#x…
阅读更多...
​（三）hadoop之hive的搭建1

​（三）hadoop之hive的搭建1

下载 访问官方网站https://hive.apache.org/ 点击downloads 点击Download a release now! 点击https://dlcdn.apache.org/hive/ 选择最新的稳定版 复制最新的url 在linux执行下载命令 wget https://dlcdn.apache.org/hive/hive-3.1.3/apache-hive-3.1.3-bin.tar.gz 2.解压…
阅读更多...
第十一篇【传奇开心果系列】Python的OpenCV技术点案例示例：三维重建

第十一篇【传奇开心果系列】Python的OpenCV技术点案例示例：三维重建

传奇开心果短博文系列 系列短博文目录Python的OpenCV技术点案例示例系列 短博文目录一、前言二、OpenCV三维重建介绍三、基于区域的SGBM示例代码四、BM&#xff08;Block Matching&#xff09;算法介绍和示例代码五、基于能量最小化的GC&#xff08;Graph Cut&#xff09;算法介…
阅读更多...
linux 组建和卸载raid1、raid0详细操作

linux 组建和卸载raid1、raid0详细操作

组raid的最好是相同容量和型号的硬盘&#xff0c;否则会有木桶效应 linux下组raid有很多细节 一、安装raid软件 deb包 apt-get install mdadm或dnf包 dnf install mdadm二、组raid1-镜像&#xff0c;组raid0-并列 raid1和raid0只有在madam命令时一点点不同&#xff0c;其他…
阅读更多...
智慧商城项目(ing)

智慧商城项目(ing)

项目概述 1.创建项目 目标&#xff1a;基于VueCli自定义创建项目架子&#xff0c;将目录调整成符合企业规范的目录 删除多余的文件 修改路由配置 和App.vue 新增两个目录 api/utils ①api接口模块:发送ajax请求的接口模块 ②utils工具模块:自己封装的一些工具方法模块 2…
阅读更多...
Flutter组件 StatefulWidget、StatelessWidget 可继承写法

Flutter组件 StatefulWidget、StatelessWidget 可继承写法

前言 学过Java的同学&#xff0c;应该都知道面向对象语言的三大特征&#xff0c;封装、继承、多态&#xff1b; Dart也是面向对象的语言&#xff0c;但是在Flutter中的很多组件都被下划线 _ 标记为私有&#xff0c;导致无法继承&#xff0c;本文将介绍一种非私有的创建组件写…
阅读更多...
VUE开发记录

VUE开发记录

1、VUE模板传递参数到JS方法 <select-language :value"item.language" change"selectLanguage($event, key)"></select-language>selectLanguage(value, key){console.log(value, key) }, 2、Element框架el-form-item自定义label和内容 <…
阅读更多...
追觅科技发布全折叠高速吹风机Pocket

追觅科技发布全折叠高速吹风机Pocket

2月2日&#xff0c;追觅科技召开2024新品发布会&#xff0c;一系列年度新品亮相。现场&#xff0c;追觅科技发布了个护重磅新品——追觅Pocket折叠高速吹风机&#xff0c;这也是行业首个全折叠高速吹风机。 创新柔性折叠技术&#xff0c;直卷吹一机全能 追觅Pocket折叠高速吹风…
阅读更多...
07 SB3之@HttpExchange(TBD)

07 SB3之@HttpExchange(TBD)

HttpExchange是SpringBoot3的新特性. Spring Boot3 提供了新的 HTTP 的访问能力&#xff0c;封装了Http底层细节. 通过接口简化 HTTP远程访问&#xff0c;类似 Feign 功能。 SpringBoot 中定义接口提供 HTTP 服务 --> 框架生成的代理对象实现此接口 --> 框架生成的代理…
阅读更多...
java处理ppt方案详解

java处理ppt方案详解

需求 需要系统中展示的ppt案例有一个动态展示的效果&#xff0c;也就是要有动画的交互&#xff0c;要求支持浏览器直接打开预览 背景 目前已经实现了前端上传pptx文件&#xff0c;后端解析为png的图片&#xff0c;前端掉接口返回对应的图片&#xff0c;模拟播放ppt的效果 各种尝…
阅读更多...
树莓派Pico W无线开发板蓝牙通信MicroPython编程

树莓派Pico W无线开发板蓝牙通信MicroPython编程

内容提要：2023年6月14日，树莓派官方发布了对树莓派Pico W无线开发板（简称Pico W）MicroPython蓝牙功能的支持。本文首先介绍Pico W接口信号及蓝牙通信协议，然后通过Pico W接口信号扩展连接一只LED和一个按键，并给出Pico W蓝牙通信MicroPython编程示例。 一、Pico W接口信号…
阅读更多...
华为数通方向HCIP-DataCom H12-821题库(单选题：401-420）

华为数通方向HCIP-DataCom H12-821题库(单选题：401-420）

第401题 R1的配置如图所示，此时在R1查看FIB表时，关于目的网段192.168.1.0/24的下跳是以下哪一项? A、10.0.23.3 B、10.0.12.2 C、10.0.23.2 D、10.0.12.1 【答案】A 【答案解析】 该题目考查的是路由的递归查询和 RIB 以及 FIB 的关系。在 RIB 中，静态路由写的是什么，下…
阅读更多...
时间序列预测 —— TCN模型

时间序列预测 —— TCN模型

时间序列预测 —— TCN模型 卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;在图像处理等领域取得了显著的成就&#xff0c;一般认为在处理时序数据上不如RNN模型&#xff0c;而TCN&#xff08;Temporal Convolutional Network&#xff09;…
阅读更多...
十分钟上手vue！

十分钟上手vue！

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的界面&#xff0c;Vue 都可以胜任。 一 vue.js的导入及使用 vue安装…
阅读更多...
PostgreSQL从小白到高手教程 - 第44讲：pg流复制部署

PostgreSQL从小白到高手教程 - 第44讲：pg流复制部署

PostgreSQL从小白到专家&#xff0c;是从入门逐渐能力提升的一个系列教程&#xff0c;内容包括对PG基础的认知、包括安装使用、包括角色权限、包括维护管理、、等内容&#xff0c;希望对热爱PG、学习PG的同学们有帮助&#xff0c;欢迎持续关注CUUG PG技术大讲堂。 第44讲&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023