vue3、vue2使用svga动态文件

Vue3代码如下：

1.安装svga

npm i svga

2.封装组件 esSvga

<template>
  <div class="bg">
    <canvas id="canvas" class="canvas"></canvas>
  </div>
</template>

<script  setup>
import { Parser, Player, DB } from 'svga'
let props = defineProps({
  svgaImg: {
    type: String,
    required: true
  },
  width: {
    type: Number,
    required: true
  },
  height: {
    type: Number,
    required: true
  }
})
const w = computed(() => props.width + 'px')
const h = computed(() => props.height + 'px')
const startSvga = async function () {
  try {
    const db = new DB()
    console.log(db, 'db');
    let svga = await db.find(props.svgaImg)
    if (!svga) {
      const parser = new Parser({ isDisableImageBitmapShim: true })
      svga = await parser.load(props.svgaImg)
      await db.insert(props.svgaImg, svga)
    }
    const doc = document.getElementById('canvas')
    const player = new Player(doc)
    await player.mount(svga)
    player.onStart = () => console.log('播放了')
    // 开始播放动画
    player.start()
  } catch (error) {
    console.error(error)
  }
}
nextTick(() => {
  startSvga()
})
</script>

<style scoped lang="scss">
.bg {
  width: 100vw;
  height: 100vh;
}
.canvas {
  width: v-bind(w) ;
  height:v-bind(h);
}
</style>

3.引入

import svgaImg from "@/assets/.../icon1.svga?url";  
import esSvga from "@/components/esSvga/index.vue";

4.父组件中使用

 <es-svga :svgaImg="svgaImg" :width="103" :height="70"></es-svga>

Vue2代码如下：

<template>
  <canvas :id="elid" class="canvas" :width="width" :height="height"></canvas>
</template>
 
<script>
import { Parser, Player } from 'svga'
export default {
  props: {
    elid: {
      type: [String],
      required: true
    },
    svgaImg: {
      type: String,
      required: true
    },
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    },
    lookoutEquipment: {
      type: Number,
      default: 0
    },
    startFrame: {
      type: Number,
      default: 0
    },
    fillMode: {
      type: String,
      default: 'forwards'
    },
    playMode: {
      type: String,
      default: 'forwards'
    },
    loopStartFrame: {
      type: Number,
      default: 10
    },
    isCacheFrames: {
      type: Boolean,
      default: true
    },
    isUseIntersectionObserver: {
      type: Boolean,
      default: true
    },
    isOpenNoExecutionDelay: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    if (this.width && this.height) {
      this.$nextTick(function () {
        this.startSvga()
      })
    }
  },
  methods: {
    async startSvga() {
      try {
        const parser = new Parser()
        const svga = await parser.load(this.svgaImg)
        const doc = document.getElementById(this.elid)
        let _this = this
        const player = new Player({
          // 播放动画的 Canvas 元素
          container: doc,
 
          // 循环次数，默认值 0（无限循环）
          LookoutEquipment: _this.lookoutEquipment,
 
          // 最后停留的目标模式，默认值 forwards
          // 类似于 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
          fillMode: _this.fillMode,
 
          // 播放模式，默认值 forwards
          playMode: _this.playMode,
 
          // 开始播放的帧数，默认值 0
          startFrame: _this.startFrame,
 
          // 结束播放的帧数，默认值 0
          // endFrame: 30,
 
          // 循环播放开始的帧数，可设置每次循环从中间开始。默认值 0，每次播放到 endFrame 后，跳转到此帧开始循环，若此值小于 startFrame 则不生效
          // 类似于 https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loopStart
          loopStartFrame: _this.loopStartFrame,
 
          // 是否开启缓存已播放过的帧数据，默认值 false
          // 开启后对已绘制的帧进行缓存，提升重复播放动画性能
          isCacheFrames: _this.isCacheFrames,
 
          // 是否开启动画容器视窗检测，默认值 false
          // 开启后利用 Intersection Observer API 检测动画容器是否处于视窗内，若处于视窗外，停止描绘渲染帧避免造成资源消耗
          // https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API
          isUseIntersectionObserver: _this.isUseIntersectionObserver,
 
          // 是否使用避免执行延迟，默认值 false
          // 开启后使用 `WebWorker` 确保动画按时执行（避免个别情况下浏览器延迟或停止执行动画任务）
          // https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#Policies_in_place_to_aid_background_page_performance
          isOpenNoExecutionDelay: _this.isOpenNoExecutionDelay
        })
        await player.mount(svga)
        // console.log(, 'sdsd');
        player.onStart = () => console.log('播放了')
        // player.onProcess = () => console.log('onProcess', player.progress)
        // player.onEnd = () => console.log('onEnd')
        // 开始播放动画
        player.start()
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>
 
<style scoped lang="scss">
.canvas {
  width: 100%;
  height: 100%;
}
</style>

其他步骤都差不多