Cesium + Vue 实现地图(屏幕)截图 (四)
cesium实现截图html2canvas
·
引入两个外部包
- html2canvas
- canvas2images,可以在github搜索下载
修改配置
通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer:true,
这一步非常重要,如果不配置好,是无法从cesium中获取到地图截图的
var viewer = new Cesium.Viewer("cesiumContainer",{
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: true, //是否显示点击要素之后显示的信息
fullscreenButton: false,//全屏显示
CreditsDisplay: false,
contextOptions: {
webgl:{
alpha: true,
depth:true,
stencil:true,
antialias:true,
premultipliedAlpha:true,
//通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer:true,
failIfMajorPerformanceCaveat:true
}
},});
实现思路
- 获取DOM元素标签
- 通过
canvas.toDataURL()
获取图片的链接 - 利用
img
标签或者a
标签将图片下载至本地
const opts = {
// logging: true, //便于查看html2canvas的内部执行流程
useCORS: true
};
//通过$refs获取不同节点的位置,关键在于cesium配置选项中是否开启了允许截取canvas元素
html2canvas(this.$refs.getmap,opts).then(canvas => {
//要想设置截取后的图片大小,可以预设样式,
//也可以通过canvas2image来设置,好处在于动态调节图幅纵横比
// var imageWidth = 750;
// var ximg = Canvas2Image.Canvas2Image.convertToImage(canvas, imageWidth, imageWidth * canvas.height / canvas.width,'png');
let link = document.createElement("a");
link.href = canvas.toDataURL();//下载链接
// ink.href = ximg.src;//下载链接
link.setAttribute("download","专题图.png");
link.style.display = "none";
document.body.appendChild(link);
link.click();
方法二
也可以获取cesium的容器canvas,然后通过canvas2image直接生成
var myCanvas = viewer.scene.canvas;
var myImg = Canvas2Image.convertToImage(mycanvas, width, height , 'png');
image.src = myImg.src;
参考
https://blog.csdn.net/black2girl/article/details/84060655
更多推荐
已为社区贡献4条内容
所有评论(0)