Cesium当前地图截屏(截图)功能实现

一、在实现截屏代码之前，需要在地球初始化options里面配置以下代码

需要在options里加上contextOptions.webgl.preserveDrawingBuffer = true;否则下载的图片会空白一片

var viewer = new Cesium.Viewer("cesiumViewer", {
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
	  url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
	  minimumLevel: 3,
	  maximumLevel: 18
	}),
  baseLayerPicker: false,
  //问号图标，导航帮助按钮，显示默认的地图控制帮助
  navigationHelpButton: false,
  animation: false, //动画器件，显示当前时间，允许跳转特定时间
  timeline: false, //时间轴
  //全屏图标，全屏按钮
  fullscreenButton: false,
  //阴影
  shadows: true,
  //展示数据版权属性
  CreditsDisplay: false,
  //terrainExaggeration: 3.0, //地形夸大
  shouldAnimate: true,
  contextOptions: {
	webgl: {
		alpha: true,
		depth: true,
		stencil: true,
		antialias: true,
		premultipliedAlpha: true,
		preserveDrawingBuffer: true,//通过canvas.toDataURL()实现截图需要将该项设置为true
		failIfMajorPerformanceCaveat: true
	}
  }
});

二、下载代码实现

function screenshot(){
	var canvas = viewer.scene.canvas;
	var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

	var link = document.createElement("a");
	var blob = dataURLtoBlob(image);
	var objurl = URL.createObjectURL(blob);
	link.download = "截图.png";
	link.href = objurl;
	link.click();

	function  dataURLtoBlob(dataurl) {
		var 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});
	}
}