vue 使用pag格式的文件，作为背景图

PAG是一套完整的动画工作流文件夹。

可以通过安装依赖

npm install libpag

或者cdn

<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>

来引入

utils文件封装

// pag文件(支持本地相对路径)， canvas 的id名，播放次数
export const initPag = async (url, id, num=0) => {
  // 实例化 PAG
  const PAG = await window.libpag.PAGInit()
  // 获取 PAG 素材数据
  // https://pag.art/file/like.pag
  const buffer = await fetch(url).then((response) => {
    return response.arrayBuffer()
  }
  )
  // 加载 PAG 素材为 PAGFile 对象
  const pagFile = await PAG.PAGFile.load(buffer)
  // 将画布尺寸设置为 PAGFile的尺寸
  const canvas = document.getElementById(id)
  canvas.width = pagFile.width()
  canvas.height = pagFile.height()
  // 实例化 PAGView 对象
  const pagView = await PAG.PAGView.init(pagFile, canvas)
  // 循环播放
  pagView.setRepeatCount(num)
  await pagView.play()
}

public 的index.html页面引入

<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>

页面中

<template>
  <canvas id="pag"></canvas>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { initPag } from '@/utils/utils'
onMounted(() => {
  initPag('https://www.mustake.net/loading.pag', 'pag')
})
</script>

<style>
#pag {
  width: 200px;
  height: 200px;
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999999;
}
</style>

 参考文献：https://blog.csdn.net/l2345432l/article/details/127851665

新的cdn  

<script src="https://unpkg.com/libpag@latest/lib/libpag.min.js"></script>
由于cdn得不稳定性，最好还是将js下载到本地