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