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