前端bug录-移动端下载图片

前天，快下班的时候，一朋友发来一个战绩图。
这是要约我上分？（这兄弟一手 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）-下载文件&下载进度

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