Cesium screenshot function

First install canvas2image 

npm intsall canvas2image --save

Because the project is based vue, it is necessary to add in the final surface of canvas2image

export default Canvas2Image

Then introduced canvas2image.js the page

Focus: also need to add the following code in cesium initialization (if not add, shot out of the picture completely black)

       ContextOptions: { 
          WebGL: { 
            Alpha: to true , 
            depth: to true , 
            Stencil: to true , 
            antialias: to true , 
            premultipliedAlpha: to true ,
             // () needs to be achieved by the theme canvas.toDataURL set to true 
            preserveDrawingBuffer: to true , 
            failIfMajorPerformanceCaveat: to true 
          } 
        }

 

At last

        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()

This can be achieved cesium features a screenshot