没有在主页面进行,在独自的一个路由通过监听事件监听截图按钮, 依据我的代码或者查看开源代码进行应用或批改!
当初 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…