js多方案截图

1、使用html2canvas

npm install --save html2canvas

import html2canvas from 'html2canvas'

// 引入html2canvas截图

const html2canvasCapture = function () {

var content = this.$refs.map;

html2canvas(content,{

useCORS : true,

allowTaint :false,

taintTest: true,

scale: 1,

}).then((canvas)=>{

var dataUrl = canvas.toDataURL("image/jpeg", 1.0);

console.log(dataUrl);

})

}

2、使用domtoimage

npm install --save domtoimage

const domtoimageCapture = function(){

domtoimage.toPng(this.$refs.map).then(urls=>{

console.log(urls);

});

}

3、在使用cesium三维地图时截图

首先要地图的viewer必须打开允许截图配置

const viewer = new Viewer('map', {

  contextOptions: {

  webgl: {

      alpha: true,

      depth: false,

      stencil: true,

      antialias: true,

      premultipliedAlpha: true,

      preserveDrawingBuffer: true,

      failIfMajorPerformanceCaveat: true

    },

    allowTextureFilterAnisotropic: true

  },

})

截图：

const cesiumCapture = function(){

  var canvas = viewer.scene.canvas;

    var dataUrl = canvas.toDataURL("image/jpeg", 1.0);

    console.log(dataUrl);

}