乐趣区

关于vue.js:如何动态修改Lottie动画里的部分图片

jiezi

动效给的成果是一个头耳朵话筒胳膊都在动的摇晃成果，这个不能传视频，大体图片展现如下

紧靠前端 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…

退出移动版