Código
<!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;
}
.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,
animation: false,
timeline: false,
fullscreenButton: false,
baseLayerPicker: false,
sceneModePicker: true,
navigationHelpButton: false,
geocoder: false,
sceneModePicker: false,
contextOptions: {
webgl: {
alpha: true,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: 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>
Imagen de efecto
点击场景出图按钮,就会下载当前画面.