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

2019年9月1日 159次阅读 来源: linong

前天，快下班的时刻，一朋侪发来一个战绩图。
这是要约我上分？（这兄弟一手 C 位吊打亲朋）。我坚决谢绝三连。
结果，小韭菜问我，右侧谁人图怎样做？那好了，事变从这里最先
《前端bug录-挪动端下载图片》

剖析一下需求

这个图彷佛叫雷达图，那我们先去看 echarts，几乎不要太像好吗？
《前端bug录-挪动端下载图片》

小韭菜没给我回响反映的时机提出了另一个主意：简朴一点
简朴一点，我又想起了 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点坐标。
    《前端bug录-挪动端下载图片》

  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)

    《前端bug录-挪动端下载图片》

有点汗颜，全都还给先生了。忘的真是乾乾净净

微信民众号：前端linong

《前端bug录-挪动端下载图片》

    原文作者：linong
    原文地址: https://segmentfault.com/a/1190000019403486
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞