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的截图功能了