vue项目中使用svga格式文件

项目场景：

最近开发中，遇到一个场景：产品想要增加一些可后台上传的动画效果，本想用git格式图片，但由于git格式图片有各种缺陷，因此设计选用了svga格式

---

问题描述：

由于svga并不是某种image格式，因此不能直接展示，需要通过一些插件去解决，其本质还是使用canvas去绘制动画，这里使用svgaplayerweb来进行一个基本的绘制。
首先安装依赖：

// 安装
npm install svgaplayerweb --save

// 引入svgaplayerweb插件
import SVGA from 'svgaplayerweb';

// 引入svga

---

html中添加一个容器

<div id="demoCanvas" ref="demoCanvas"></div>

js中定义一个函数用来展示图片

 initMachineSVGA() {
    var mycanvas = document.getElementById("demoCanvas");
    // 修改容器大小
    mycanvas.style.width = 100 + "px"; 
    mycanvas.style.height = 100 + "px";
    
    let player = new SVGA.Player("#demoCanvas");
    let parser = new SVGA.Parser("#demoCanvas");
    // this.imageUrl 定义一个参数接收url
    parser.load(this.imageUrl, function (videoItem) { 
      player.setVideoItem(videoItem);
      player.startAnimation();
    });
  }

// ajax请求 获取url
this.$request.get({
   url: "xxx",
   done: (res) => {
       this.imageUrl= res.data.imageUrl
       // 获取url并调用绘图方法
       this.$nextTick(() => {
          this.initMachineSVGA()
        })
   },
 });

---

后续问题：

可能获取的url地址会产生跨域报错，只需要常规的解决跨域问题即可。