动效给的成果是一个头耳朵话筒胳膊都在动的摇晃成果，这个不能传视频，大体图片展现如下
紧靠前端css实现这种动效比拟难，因而决定采纳Lottie实现。
前面才理解到，产品心愿小猴子的脸是孩子的头像图片，于是批改了Lottie的json文件，将动效外面的头像换成本人的，然而实现成果如下
看了很多对于lottie的文章，查找每一个属性的作用，找到一个 tm(剪裁门路) 的属性，然而都仅仅是提到这个属性，具体怎么用齐全不晓得，看一下外面的json构造，想去实现剪裁成果几乎一脸蒙。
只能另辟蹊径，有什么方法获取头像之后把它变成圆的呢？
- 后端解决返回圆形头像
- 前端剪裁头像，而后替换
后端解决的话，也不太事实，还要后端实现，而且会占用服务器解决。
前端解决，突然想到之前用canvas生成海报图，那是否能够绘制圆形图片呢？搜了一下果然能够，如获至宝。
关键在于是clip()API，这个API，能够用你指定的形态在画布上裁剪一部分进去，而后，接下来你在画布上的操作只有在该形态区域内可见，如果还有后续还有对画布的其余中央有操作，能够应用restore()接口复原，然而必须在应用clip接口前用 save() 接口保留canvas的状态。
实现圆角计划外围代码如下
<canvas id="canvas" style="border: 1px solid;"></canvas><script> function circleImg(ctx, img, x, y, r) { ctx.save(); var d =2 * r; var cx = x + r; var cy = y + r; ctx.arc(cx, cy, r, 0, 2 * Math.PI); // 绘制圆形 ctx.clip(); // 从画布上剪裁圆形 ctx.drawImage(img, x, y, d, d); ctx.restore(); } var img = new Image(); img.src = 'xxx'; var canvas = document.querySelector("#canvas"); var context = canvas.getContext("2d"); circleImg(context, img, 100, 20, 50);</script>应用canvas的路线总是波折的，刚筹备运行看成果，就提醒 Cannot read property 'getContext' of null"
粗心就是canvas获取不到 getContext属性，所以只能等html加载实现后执行js代码，写在window.onload里即可。
绘制实现后，还须要将canvas转成图片，
canvas.toDataURL("image/png")然而，又是一口老血... 控制台红红的提醒，
**Uncaught DOMExc****eption: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.**经google 发现原来是受限于 CORS 策略，会存在跨域问题，尽管能够应用图像（比方append到页面上）然而绘制到画布上会净化画布，一旦一个画布被净化,就无奈提取画布的数据，比方无奈应用应用画布toBlob(),toDataURL(),或getImageData()办法;当应用这些办法的时候 会抛出一个平安谬误
这就简略了，给图片增加crossOrigin属性，
img.setAttribute("crossOrigin",'Anonymous')而后将demo迁徙到我的项目里运行，咦，其它图片门路怎么找不到了，多页面服务，根门路如同对不上
难道只能把所有图片上传到oss，而后替换成网络图片？这样保护起来就比拟吃力了。
前端的魅力是无穷的，解析不了json文件门路，然而能够解析js门路啊，最初把整个json文件改成js，外面的图片都用require引入，最初export 进去，完满解决！
最终实现成果，so cool!
参考文章：https://www.jianshu.com/p/9a6...