乐趣区

前端bug录移动端下载图片

jiezi

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

测试地址

退出移动版