前端bug錄-只需兩分鐘，教你在手機移動端下載任意想要的圖片

前天，快下班的時候，一朋友發來一個戰績圖。

這是要約我上分？（這兄弟一手 C 位吊打親友）。我果斷拒絕三連。

結果，小韭菜問我，右邊那個圖怎麼做？那好了，事情從這裏開始

分析一下需求

這個圖好像叫 雷達圖 ，那我們先去看 echarts ，簡直不要太像好嗎？

小韭菜沒給我反應的機會提出了另一個想法： 簡單一點

簡單一點，我又想起了 Vue官網 有這個東西。

小韭菜看都沒看就說： 不用 Vue

What？我只是讓你看看原理啊。那好吧，我看了一眼，就是 svg 實現

SVG 實現雷達圖

jsrun測試地址 ，如果 jsrun 掛了，可以去我個人網站上看 測試地址 。

<svg width="200" height="200" class="demo-svg warp">
  <polygon points="100,10.899999999999991 175.32367609057616,75.52585404550416 145.49457852743743,162.61791536462093 71.43363673858582,139.31822592662246 41.795341202736594,81.08815994425322" class="demo-polygon" style="fill: #41B883;"></polygon> 
</svg>

SVG 的 polygon

<polygon> 標籤用來創建含有 不少於三個邊 的圖形。

points 屬性定義多邊形每個角的 x 和 y 座標

那我們來看上面的圖片，正好五個角，那我們就可以動手改改。 簡單的一匹

100,10.899999999999991
175.32367609057616,75.52585404550416
145.49457852743743,162.61791536462093
71.43363673858582,139.31822592662246
41.795341202736594,81.08815994425322

實現下載雷達圖

因爲快下班了，小韭菜看了一眼說搞定。然後又提出了一個需求， 下載這個圖片 。我一想簡單的一匹啊。我前兩天才寫了文章的 前端培訓-初級階段-場景實戰（2019-06-06）-下載文件&下載進度

1. 小韭菜之前用過 html2canvas 還是啥來着。直接這樣搞
2. download 直接下載（ svgToDataurl ）
3. svgToCanvas 然後下載 canvas 的圖片
4. canvas 的 toBlob 結合 URL.createObjectURL 和 download
5. canvas 的 toDataUrl 結合 download

爲啥我上面寫了這麼多的方法。

因爲 移動端不好使 。不好使的原因就是 DataURL 和 BlobURL 在移動端（微信、QQ、QQ瀏覽器）無法下載 。

SVG 怎麼用 img 顯示

這個還是當時在 張鑫旭張大師 哪裏看到的方法。

SVGTODataURL data:image/svg+xml,%3Csvg xmlns='http://w 

這樣我們就可以顯示了。

download 直接下載

上面我們顯示了出來，直接下載吧。nonono，因爲上面的 Dataurl 是 svg 格式的，下載也是 SVG 格式的。

所以我們需要用 img 讀取 svgurl。然後 canvas 讀取 img 。然後 canvas 輸出想要的圖片格式。然後再下載。

download 無法使用，那我們怎麼辦呢？

1. PC端，走 download 。
2. 移動端，走 長按保存圖片。

總結步驟

1. SVG 生成雷達圖。（實現效果）
2. SVG to DataUrl。（爲了讓 img 可以加載）
3. img 加載 DataUrl。（爲了讓 canvas 可以加載）
4. canvas 加載 img。（爲了改變輸出格式）
5. canvas toDataUrl。（改變輸出格式爲圖片格式）

6. 分情況支持下載

   1. 移動端 圖片長按下載
   2. PC端 download下載