Cesium截圖功能

首先安裝  canvas2image 

npm install canvas2image --save

因為項目基於vue，所以需要在canvas2image的最后面 加上

export default Canvas2Image

然后在頁面中引入canvas2image.js

重點: 還需要在cesium初始化中添加如下代碼(若是不添加，截圖出來的圖片是全黑的)

       contextOptions: {
          webgl:{
            alpha: true, depth:true, stencil:true, antialias:true, premultipliedAlpha:true, //通過canvas.toDataURL()實現截圖需要將該項設置為true preserveDrawingBuffer:true, failIfMajorPerformanceCaveat:true } }

 

最后

        var canvas = this.viewer.scene.canvas;
        var imageWidth = 800; var img = canvas2image.convertToImage(canvas, imageWidth, imageWidth * canvas.height / canvas.width,'png'); var loadImg = document.createElement('a') loadImg.href = img.src loadImg.download = 'earth' loadImg.click()

這樣就可以實現cesium的截圖功能了