前端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下載

測試地址

更新:計算點：2019年6月10日09:42:14

時間：2019年6月10日09:42:14
問題：若是計算對應的點
假設咱們要作的是 五角形，寬高都是 200px。各項能力都是 0-100%。

1. 中心點爲 100,100
2. 咱們先平分五份 360/5 = 72
3. 經過上面的咱們能夠把咱們問題變爲已知圓心、線段點&長度（百分比*0度的最長邊）、和旋轉角度（每項能力是72），求旋轉點座標。以下，已知 A、B 點座標，BAC角度求C點座標。
   

4. 或者說計算圓上任意一點
   圓點座標：(100,100)，半徑：100，角度：72
   圓上任一點爲：（x1,y1）

   x1 = 100 + 100 * Math.cos(72 * Math.PI /180) //x1=x0+r*cos(ao*3.14/180)
   y1 = 100 + 100 * Math.sin(72 * Math.PI /180) //y1=y0+r*sin(ao*3.14/180)

   

有點汗顏，全都還給老師了。忘的真是乾乾淨淨

微信公衆號：前端linong