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

Jun 6, 2019

思否

前端BUG录调试 Vue Canvas

转载自 SegmentFault

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

小韭菜之前用过 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

原文：SegmentFault