我們用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，當 - 掘金

都記錄下來，以后就方便了。