使用 html2canvas 對有百度地圖的 Dom 元素處理成圖片

問題1：百度地圖應用的是瓦片式圖片（地圖是一張張圖片拼出來的），html2canvas 處理時，遇到非同一域名下的圖片，瀏覽器會顯示跨域的報錯，也無法用反向代理來解決，因爲瓦片圖片的域名不確定，無法指定 proxy_pass
解決：使用百度地圖靜態圖處理（http://lbsyun.baidu.com/index...），這時域名確定了（http://api.map.baidu.com/），可以用反向代理來解決跨域

<!--html-->
<el-image
:src="`/baidu-static/staticimage/v2?ak=yourak&width=1024&height=400&center=${center.lng},${center.lat}&zoom=16`"
>
<div
  slot="placeholder"
  class="image-slot"
>
  加載中<span class="dot">...</span>
</div>
</el-image>

<!--nginx-->
location ^~ /baidu-static/ {
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-
Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
proxy_pass http://api.map.baidu.com/;
}

問題2：地圖上的覆蓋物怎麼顯示出來呢
解決：看了下百度地圖靜態圖的 api, 不能很好的支持覆蓋物自定義樣式，最多可以讓你指定一張自定義的圖片（不能是本地圖片）。中間試過很多辦法，覺得可行的是使用 openLayers.Map, 可是代碼改動的工作量太大了，果斷放棄了。再後來想到自己用 div 直接模擬好覆蓋物，設置比靜態圖層級高一點就可以解決了。

問題3：用 css 樣式畫了一個虛線圓，在 html2canvas 處理後的生成的圖，發現虛線變成了實線
解決：使用 canvas 來畫圓

問題4：一個 icon 採用絕對定位，在 html2canvas 處理後的生成的圖，發現 icon 沒有顯示
解決：給 icon 設置 z-index 大於百度靜態圖層級（PS: 靜態圖的樣式也用了絕對定位的情況下）

問題5：在 html2canvas 處理後生成的圖片，有黑色背景色
解決： image/png 改成 image/jpg

try {
  html2canvas(sharePage, {
    useCORS: true
  }).then((canvas) => {
    const imgBase64 = canvas.toDataURL('image/jpg')
    this.data64 = imgBase64
    })
  } catch (err) {
}