Cesium场景导出为本地PNG图片

Cesium场景导出为本地PNG图片

声明 : 本文参考了网上的一些论坛和国外的一些帖子，所有不能算作原创，只做交流学习用途

步骤：

1、获取cesium的canvas,并导出为base64编码的字符串（一定注意render（）函数，不然导出是一张黑乎乎的图片）

 viewer.render();
 var canvas = viewer.scene.canvas;
 let dataurl = canvas.toDataURL("image/png");

2、将base64转为图片并存为本地文件（参考知乎金华大佬的代码）

	//1.上传至服务器，如果不需要，可直接注释掉
	 var arr = dataurl.split(',');
	 var mime = arr[0].match(/:(.*?);/)[1];
	 var bstr = atob(arr[1]);
	 var n = bstr.length;
	 var u8arr = new Uint8Array(n);
	 while(n--){
	    u8arr[n] = bstr.charCodeAt(n);
	 }
     var obj = new Blob([u8arr], {type:mime});
     var fd = new FormData();
     fd.append("upfile", obj,"image.png");
     $.ajax({
         url: "/img",
         type: "POST",
         processData: false,
         contentType: false,
         data: fd,
         success: function (data) {}
     });
     //2.保存图片到本地
     (function(t){
         var dlLink = t || document.createElement("a");
         if(!t){
         dlLink.id='dlLink';
         dlLink.download = 'res';
         document.body.appendChild(dlLink);
         }
         dlLink.href = dataurl;
         dlLink.click();
     })(document.querySelector("#dlLink"));

3、效果