关于vue.js:superMap开源框架-使用Cesium实现截图

42次阅读

共计 955 个字符，预计需要花费 3 分钟才能阅读完成。

没有在主页面进行，在独自的一个路由通过监听事件监听截图按钮, 依据我的代码或者查看开源代码进行应用或批改！

当初 data 中定义全局的 viewer 进行应用！因为要申明一个全局的 viewer 来进行的；

data(){
    return{
      url:'',
      viewer:window.viewer,
      scene:viewer.scene,     
  }
},

通过监听事件获取；


methods: {
    // 截图
    screenshotClick() {var promise = this.scene.outputSceneToFile();
        Cesium.when(
          promise,
          (base64data)=> {this.download(base64data);
          }
        );
    },
    /**
     * 依据图片生成画布
     */
    convertImageToCanvas(image) {var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
    },
    /**
     * 下载图片
     */
    download(base64data) {var image = new Image();
      image.src = base64data;
      console.log(image.src,'image');
      image.onload = ()=> {var canvas = this.convertImageToCanvas(image);
        this.url = canvas.toDataURL("image/jpeg");  // 生成齐全的 base64 照片编码
        var a = document.createElement("a");
        var event = new MouseEvent("click");
        a.download = new Date().getTime() + ".jpg"; // 指定下载图片的名称
        a.href = this.url;
        a.dispatchEvent(event); // 触发超链接的点击事件
      };
    },
}

总体流程就是这样！
有什么没有看明确的也能够上官网参考：http://support.supermap.com.c…

正文完