前端bug錄-移動端下載圖片

tabalt 發布于2019-08-23 17:59 / 726人閱讀

摘要：前天，快下班的時候，一朋友發來一個戰績圖。然后又提出了一個需求，下載這個圖片。我前兩天才寫了文章的前端培訓初級階段場景實戰下載文件下載進度小韭菜之前用過還是啥來著。不好使的原因就是和在移動端微信瀏覽器無法下載。移動端，走長按保存圖片。

前天，快下班的時候，一朋友發來一個戰績圖。
這是要約我上分？（這兄弟一手 C 位吊打親友）。我果斷拒絕三連。
結果，小韭菜問我，右邊那個圖怎么做？那好了，事情從這里開始

分析一下需求

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

小韭菜沒給我反應的機會提出了另一個想法：簡單一點
簡單一點，我又想起了 Vue官網有這個東西。

小韭菜看都沒看就說：不用 Vue
What？我只是讓你看看原理啊。那好吧，我看了一眼，就是 svg 實現

SVG 實現雷達圖

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

SVG 的 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）-下載文件&下載進度

小韭菜之前用過 html2canvas 還是啥來著。直接這樣搞

download 直接下載（svgToDataurl）

svgToCanvas 然后下載 canvas 的圖片

canvas 的 toBlob 結合 URL.createObjectURL 和 download

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 無法使用，那我們怎么辦呢？

PC端，走 download 。

移動端，走長按保存圖片。

總結步驟

SVG 生成雷達圖。（實現效果）

SVG to DataUrl。（為了讓 img 可以加載）

img 加載 DataUrl。（為了讓 canvas 可以加載）

canvas 加載 img。（為了改變輸出格式）

canvas toDataUrl。（改變輸出格式為圖片格式）

分情況支持下載

移動端圖片長按下載

PC端 download下載

測試地址

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

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

中心點為 100,100

我們先平分五份 360/5 = 72

通過上面的我們可以把我們問題變為已知圓心、線段點&長度（百分比*0度的最長邊）、和旋轉角度（每項能力是72），求旋轉點坐標。如下，已知 A、B 點坐標，BAC角度求C點坐標。

或者說計算圓上任意一點
圓點坐標：(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

云服務器 GPU云服務器移動端web前端框架 webrtc 移動端下載移動端js圖片打包 H5移動端上傳圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104473.html

Vue-book 2.0 一個移動端簡單的全棧 web APP

摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現了一些簡單的功能，后臺可以對圖書進行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發給服務器，并存到服務器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】說明（菜鳥請進，大神繞道 ~）前端...

wh469012917 2019-06-27 16:37 評論0 收藏0
Vue-book 2.0 一個移動端簡單的全棧 web APP

摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現了一些簡單的功能，后臺可以對圖書進行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發給服務器，并存到服務器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】說明（菜鳥請進，大神繞道 ~）前端...

NotFound 2019-08-20 16:53 評論0 收藏0
網頁應該如何錄屏呢？

摘要：用于將及其狀態轉化為可序列化的數據結構并添加唯一標識則是將記錄的數據結構重建為對應的。用于記錄中的所有變更則是將記錄的變更按照對應的時間一一重放。表示觀察變動時，是否需要記錄變動前的屬性值。該方法返回變動記錄的數組。摘要：網頁應該如何錄屏呢？作者：Winty 原文：用戶行為錄幀調研 Fundebug經授權轉載，版權歸原作者所有。關鍵點首先，每一次會話都有一個唯一的s...

_Suqin 2019-08-26 10:35 評論0 收藏0