<!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>
点击按钮即可按照浏览器的下载路径保存