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

前天，快下班的时候，一朋友发来一个战绩图。

这是要约我上分？（这兄弟一手 C 位吊打亲友）。我果断拒绝三连。

结果，小韭菜问我，右边那个图怎么做？那好了，事情从这里开始

分析一下需求

这个图好像叫 雷达图 ，那我们先去看 echarts ，简直不要太像好吗？

小韭菜没给我反应的机会提出了另一个想法： 简单一点

简单一点，我又想起了 Vue官网 有这个东西。

小韭菜看都没看就说： 不用 Vue

What？我只是让你看看原理啊。那好吧，我看了一眼，就是 svg 实现

SVG 实现雷达图

jsrun测试地址 ，如果 jsrun 挂了，可以去我个人网站上看 测试地址 。

SVG 的 polygon

<polygon> 标签用来创建含有 不少于三个边 的图形。

points 属性定义多边形每个角的 x 和 y 坐标

那我们来看上面的图片，正好五个角，那我们就可以动手改改。 简单的一匹

100,10.899999999999991175.32367609057616,75.52585404550416145.49457852743743,162.6179153646209371.43363673858582,139.3182259266224641.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下载