vue3展示pag格式动态图

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

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

1、安装libpag

npm i libpag --save

2、安装rollup-plugin-copy

npm i rollup-plugin-copy --save

3、封装pag组件

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

<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.pagconst initPag = async () => {// console.log("has-pag-->", urlValue.value);if (!pagRef.value) return//判断画布是否存在// 实例化 PAGconst 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

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,下面进提供参考

<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 = valfileType.value = getExt(val)
})
onMounted(() => {// console.log('监pag-onMounted->', generateImgURL(urlValue.value));fileType.value = getExt(urlValue.value)
})
</script>
<style scoped lang='scss'></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ubuntu18.04】使用U盘制作ubuntu18.04启动盘操作说明

打开show application 打开Startup Disk 选择镜像 双击选择ubuntu的iso镜像 镜像下载地址 Ubuntu 18.04.6 LTS (Bionic Beaver) 制作镜像 注意&#xff1a; 制作镜像会格式化U盘&#xff0c;记得备份资料 点击Make Startup Disk,弹出如下对话框 点击Yes 输入管理员密码&a…

django的models使用介绍。

from django.db import modelsfrom utils.models import CommonModel# Create your models here. class User(CommonModel):#用户数据模型username models.CharField(用户名,max_length32, uniqueTrue)password models.CharField(密码,max_length256)nickname models.CharFi…

iOS开发 swift系列---一个视图数据修改后,如何刷新另外一个视图

题目提及的需求源于这样一个场景,我想在B视图修改一个参数,希望在A视图的界面自动刷新并显示修改的结果。这种跨视图的实时更新可能有很多方法解决,本文采用在ContentView 引入一个参数viewmodel ,在B视图修改数据后发送通知,在A视图 onReceive接收通知, 达到修改内容窗口…

Mysql基础 01 数据与sql

文章目录 一、基本概念二、mysql的常用命令三、sql规范四、数据类型五、SQL语句 一、基本概念 数据库(database,DB)&#xff1a;存储数据的仓库。 数据库管理系统软件(Database Management System,DBMS)&#xff1a;是一种操作和管理数据库的大型软件。常见的DBMS有oracle、s…

go语言中的结构体含义和用法详解

在Go语言中,结构体(struct)是一种聚合数据类型,可以将多个不同类型的数据组合成一个更复杂的类型。结构体类似于面向对象编程中的“类”,但是Go语言没有类和继承的概念,而是通过结构体和接口实现面向对象编程的特性。 1. 结构体的定义 结构体是一组字段(field)的集合…

Remix部署智能合约时报错:Gas estimation failed

1、在Remix部署智能合约时报错如下&#xff1a; 2、这时候即使发送交易&#xff0c;也无法部署 3、后来看到有人建议说调整一下GAS LIMIT&#xff0c;调整到30000000也不行&#xff0c;甚至当调整到6000000以后连交易记录都没有了 4、最终解决办法&#xff1a;Remix 和 Ganache…

QDateTime 使用

QDateTime 是 Qt 框架中用于处理日期和时间的类。本篇文章详细介绍、通过示例 快速了解QDateTime的各种操作&#xff0c;包括: 当前时间、获取日期和时间、获取日期、获取时间、获取时间戳、格式化输出、年、月、日、QTime时间、获取微妙、操作日期和时间、添加时间、减去时间、…

随机采样之接受拒绝采样

之前提到的逆变换采样&#xff08;Inverse Transform Sampling&#xff09;是一种生成随机样本的方法&#xff0c;它利用累积分布函数&#xff08;CDF&#xff09;的逆函数来生成具有特定分布的随机变量。以下是逆变换采样的缺点&#xff1a; 计算复杂性&#xff1a;对于某些分…

用 Python 爬取淘宝商品价格信息时需要注意什么?

用 Python 爬取淘宝商品价格信息时&#xff0c;需要注意以下方面&#xff1a; 一、法律和道德规范&#xff1a; 遵守法律法规&#xff1a;网络爬虫的行为应在法律允许的范围内进行。未经淘宝平台授权&#xff0c;大规模地爬取其商品价格信息并用于商业盈利等不当用途是违法的…

免费数据集网站

1、DataSearch https://datasetsearch.research.google.comhttp://DataSearch 2、FindData findata-科学数据搜索引擎https://www.findata.cn/ 3、Kaggle Kaggle: Your Machine Learning and Data Science CommunityKaggle is the world’s largest data science community …

在 FPGA 中实现 `tanh` 和 Softplus 函数

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

基于java+SpringBoot+Vue的旅游管理系统设计与实现

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven mysql5.7或8.0等等组成&#x…

C++ 并发专题 - 条件变量的使用

一&#xff1a;概述&#xff1a; 在 C 中&#xff0c;条件变量&#xff08;std::condition_variable&#xff09;是一种用于线程间同步的机制&#xff0c;主要用于在多线程环境中让一个线程等待某个条件满足后再继续执行。条件变量通常配合互斥锁&#xff08;std::mutex&#…

【Python TensorFlow】入门到精通

TensorFlow 是一个开源的机器学习框架&#xff0c;由 Google 开发&#xff0c;广泛应用于机器学习和深度学习领域。本篇将详细介绍 TensorFlow 的基础知识&#xff0c;并通过一系列示例来帮助读者从入门到精通 TensorFlow 的使用。 1. TensorFlow 简介 1.1 什么是 TensorFlow…

数据库管理-第258期 23ai:Oracle Data Redaction(20241104)

数据库管理258期 2024-11-04 数据库管理-第258期 23ai&#xff1a;Oracle Data Redaction&#xff08;20241104&#xff09;1 简介2 应用场景与有点3 多租户环境4 特性与能力4.1 全数据编校4.2 部分编校4.3 正则表达式编校4.4 随机编校4.5 空值编校4.6 无编校4.7 不同数据类型上…

基于SpringBoot的医药管理系统+LW示例参考

1.项目介绍 系统角色&#xff1a;管理员、收银员功能模块&#xff1a;管理员&#xff08;收银员信息管理、药品管理、药品类别、出库信息管理、入口信息。药品库存图表&#xff09;、收银员&#xff08;药品库存图表、会员积分信息等&#xff09;技术选型&#xff1a;SpringBo…

获取服务器相关信息

获取主机厂商型号信息&#xff0c;如有需要&#xff0c;可以根据获取到的厂商型号&#xff0c;去官网获取产品规格书 sudo dmidecode -t system# dmidecode 3.2 Getting SMBIOS data from sysfs. SMBIOS 3.2.0 present.Handle 0x0001, DMI type 1, 27 bytes System Informatio…

经典的ORACLE 11/12/19闪回操作

1、闪回表 SQL> show parameter recycle NAME TYPE VALUE ------------------------------------ ----------- ------------------------------ buffer_pool_recycle string db_recycle_cache_size …

PH热榜 | 2024-11-07

DevNow 是一个精简的开源技术博客项目模版&#xff0c;支持 Vercel 一键部署&#xff0c;支持评论、搜索等功能&#xff0c;欢迎大家体验。 在线预览 1. SWE-Kit 标语&#xff1a;打造你自己的“德文”——一个像软件工程师一样的智能助手&#xff01; 介绍&#xff1a;SWE-K…

注册了个域名Wordpress.cn.com

wordpress.cn.com 这个域名一看是很山寨的&#xff01; 我玩wordpress比较多&#xff0c;所以就想有一个wordpress之类的域名拿着耍耍&#xff0c;就像我的typecho.pro之类的那样&#xff0c;所以就想着 wp/wordpress之类的类型选一个&#xff0c;看了不少国别和新后缀&…