vue-amap组件呈现的效果图如何截图

我们用amap呈现了几个图层后,用户觉得效果很好,想点个按钮直接将这个画面截图下来。

首先我们用Canvas的toDataURL方法可以直接获取图像数据,但是实践发现截图后是空白的。

原因在警告中:

地图的WebGL context 的preserveDrawingBuffer为false,继续查询原因:

canvas中的getContext()方法 以及 webgl中的getContext()方法-腾讯云开发者社区-腾讯云c

参考上面的网址,知道了preserveDrawingBuffer:如果值为true,则不会清除缓冲区并保留其值,直到作者清除或覆盖。原来如此,那么我们将vue-amap组件的preserveDrawingBuffer设置为true不就可以了。

查找过程:

解决方案如下:

<el-amap :zoom="8.8" :WebGLParams="{preserveDrawingBuffer:true}" :center="center" @init="initMap">

加一个动态属性WebGLParams即可,这样,vue-amap组件也可以完全控制初始化参数了。

那么,另一种方法:直接使用AMap API初始化地图,网上案例很多,如下:

vue+高德地图截图导出图片 - 简书

还有一种截图办法:html2canvas

记录一下使用html2canvas截图高德地图出现的空白问题前言 最近做了个截图功能,使用的是html2canvas,当 - 掘金

都记录下来,以后就方便了。

相关推荐
小鑫同学1 天前
Alias Assistant:新一代 macOS Shell 别名管理解决方案
前端·前端工程化
꒰ঌ小武໒꒱1 天前
RuoYi-Vue 前端环境搭建与部署完整教程
前端·javascript·vue.js·nginx
名字越长技术越强1 天前
前端之相对路径
前端
望道同学1 天前
PMP/信息系统项目管理师 9 张 思维导图【考试必备】
前端·后端·程序员
局i1 天前
Vue 中 v-text 与 v-html 的区别:文本渲染与 HTML 解析的抉择
前端·javascript·vue.js
fruge1 天前
接口 Mock 工具对比:Mock.js、Easy Mock、Apifox 的使用场景与配置
开发语言·javascript·ecmascript
菜鸟冲锋号1 天前
问题:增量关联(实时同步新数据) 这个场景中,如果hudi_pay 变更了一条数据,hudi_order_pay_join 结果的数据会跟着变化吗
服务器·前端·数据库
贩卖黄昏的熊1 天前
typescript 快速入门
开发语言·前端·javascript·typescript·ecmascript·es6
拾柒SHY1 天前
XSS-Labs靶场通关
前端·web安全·xss
前端婴幼儿1 天前
前端主题切换效果
前端