Cesium + Vue 实现地图（屏幕）截图 （四）

引入两个外部包

1. html2canvas
2. canvas2images，可以在github搜索下载

修改配置

通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer:true,
这一步非常重要，如果不配置好，是无法从cesium中获取到地图截图的

   var viewer = new Cesium.Viewer("cesiumContainer",{
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: true,  //是否显示点击要素之后显示的信息
        fullscreenButton: false,//全屏显示
        CreditsDisplay: false,
        contextOptions: {
          webgl:{
            alpha: true,
            depth:true,
            stencil:true,
            antialias:true,
            premultipliedAlpha:true,
            //通过canvas.toDataURL()实现截图需要将该项设置为true
            preserveDrawingBuffer:true,
            failIfMajorPerformanceCaveat:true
          }
        },});

实现思路

1. 获取DOM元素标签
2. 通过canvas.toDataURL()获取图片的链接
3. 利用 img 标签或者 a 标签将图片下载至本地

 const opts = {
		// logging: true, //便于查看html2canvas的内部执行流程
        useCORS: true 
        };
        //通过$refs获取不同节点的位置，关键在于cesium配置选项中是否开启了允许截取canvas元素
        html2canvas(this.$refs.getmap,opts).then(canvas => {
       //要想设置截取后的图片大小，可以预设样式，
       //也可以通过canvas2image来设置,好处在于动态调节图幅纵横比
       // var imageWidth = 750;
       // var ximg = Canvas2Image.Canvas2Image.convertToImage(canvas, imageWidth, imageWidth * canvas.height / canvas.width,'png');

          let link = document.createElement("a");
          link.href = canvas.toDataURL();//下载链接
          // ink.href = ximg.src;//下载链接
          link.setAttribute("download","专题图.png");
          link.style.display = "none";
          document.body.appendChild(link);
          link.click();

方法二

也可以获取cesium的容器canvas，然后通过canvas2image直接生成

var myCanvas = viewer.scene.canvas;
var myImg = Canvas2Image.convertToImage(mycanvas, width, height , 'png');
image.src = myImg.src;

参考

https://blog.csdn.net/black2girl/article/details/84060655