vue3展示pag格式动态图

提示 :如果是webpack环境的,参考:Pag格式在vue3中的简单使用方法_pag文件-CSDN博客

下面展示的是在vite环境下配置pag

1、安装libpag

javascript 复制代码
npm i libpag --save

2、安装rollup-plugin-copy

javascript 复制代码
npm i rollup-plugin-copy --save

3、封装pag组件

下面是一个完整的pag组件,我命名为pagImg

javascript 复制代码
<template>
  <div>
    <canvas ref="pagRef" class="pag-size"></canvas>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue'
import { PAGInit } from 'libpag';
const props = defineProps({
  url: {
    type: String,
    default: '',
  }
})
const pagRef = ref() //元素 必须使用ref获取元素,别用id选择器
const urlValue = ref(props.url) //https://www.mustake.net/loading.pag

const initPag = async () => {
  // console.log("has-pag-->", urlValue.value);
  if (!pagRef.value) return//判断画布是否存在
  // 实例化 PAG
  const PAG = await PAGInit();
  // 获取 PAG 素材数据
  const buffer = await fetch(`${urlValue.value}`).then((response) => response.arrayBuffer());
  // 加载 PAG 素材为 PAGFile 对象
  const pagFile = await PAG.PAGFile.load(buffer);
  // 实例化 PAGView 对象
  const pagView = await PAG.PAGView.init(pagFile, pagRef.value);
  if (pagView) {
    pagView.setRepeatCount(0) // 0表示无限循环,大于0表示循环次数
    await pagView.play();// 播放 PAGView
  }
}

watch(() => props.url, (val) => {
  urlValue.value = val
})
onMounted(() => {
  nextTick(() => {
    initPag()
  })
})
</script>

<style>
.pag-size {
  /* 根据实际pag动图设置画布尺寸 */
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  z-index: 3;
}
</style>

4,在vite.config.js中进行配置,目的是把加载pag文件所需的libpag.wasm复制到项目的dist包中

官网的配置链接源码:pag-web/vue/vue3/vite.config.js at main · libpag/pag-web · GitHub

javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import copy from 'rollup-plugin-copy'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    copy({
      targets: [
        { src: './node_modules/libpag/lib/libpag.wasm', dest: process.env.NODE_ENV === 'production' ? 'dist/' : 'public/' },
      ],
      hook: process.env.NODE_ENV === 'production' ? 'writeBundle' : "buildStart",
    }),
  ],
  base: './',
});

5.使用pag,下面进提供参考

javascript 复制代码
<template>
  <div v-if="urlValue">
    <pagImg v-if="fileType === 'pag'" :url="generateImgURL(urlValue)" />
  </div>
</template>
<script lang='ts' setup>
import pagImg from './pagImg.vue'
import { onMounted, ref, watch } from 'vue'
import { generateImgURL } from '@/utils'; // 我项目封装的路径地址,根据自己需求,获取到完整的pag文件路径
const props = defineProps({
  url: {
    type: String,
    default: '',
  }
})
const urlValue = ref(props.url) //https://www.mustake.net/loading.pag
const fileType = ref('') // pag svga
const getExt = (fileUrl: string) => {
  // 判断是否是pag文件
  if (!fileUrl) { return "" };
  // 获取文件后缀名
  return fileUrl.split('.').pop()?.toLowerCase() || '';
}

watch(() => props.url, (val) => {
  // console.log('pag-->', val);
  urlValue.value = val
  fileType.value = getExt(val)
})
onMounted(() => {
  // console.log('监pag-onMounted->', generateImgURL(urlValue.value));
  fileType.value = getExt(urlValue.value)
})
</script>
<style scoped lang='scss'></style>
相关推荐
wan5555cn24 分钟前
多张图片生成视频模型技术深度解析
人工智能·笔记·深度学习·算法·音视频
雁于飞2 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
rannn_1112 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
Ro Jace3 小时前
心灵笔记:第一性原理学习与实践
笔记
aramae4 小时前
C++ -- 模板
开发语言·c++·笔记·其他
小马学嵌入式~4 小时前
嵌入式 SQLite 数据库开发笔记
linux·c语言·数据库·笔记·sql·学习·sqlite
hour_go5 小时前
用户态与内核态的深度解析:安全、效率与优化之道
笔记·操作系统
摇滚侠6 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
岑梓铭7 小时前
考研408《计算机组成原理》复习笔记,第六章(1)——总线概念
笔记·考研·408·计算机组成原理·计组
Suckerbin7 小时前
digitalworld.local: TORMENT
笔记·安全·web安全·网络安全