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，当 - 掘金

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