PAG 后缀的文件是一种视频。

如何播放?

下载播放器,路径: PAG · Portable Animated Graphics

在Vue项目中使用教程

1. 先安装插件

npm i -D copy-webpack-plugin

2. 在vite.config.js 中配置

  • 默认打包为 dist 路径下
  • Webpack 和 Rollup 等打包工具是默认没有打包 .wasm 文件的,需要node_modules 下的libpag/lib/libpag.wasm 文件打包到最终产物中。
const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
module.exports = defineConfig({transpileDependencies: true,configureWebpack: {patterns: [{from: path.resolve(__dirname, './node_modules/libpag/lib/libpag.wasm'), // 不会打包的路径to: './js/libpag.wasm'// 打包到dist下的路径  }], }
})

3.  pag格式的视频需要放在 public 目录下。

4. 在 Vue3 组件中使用

<template><div  class="canvas"><canvas id="pag"></canvas></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import { PAGInit } from 'libpag'const outPag = ref('../outPag.pag')  // pag格式的视频// Play VideoPAGInit().then(PAG => {fetch(outPag.value).then(response => response.blob()).then(async blob => {const file = new window.File([blob], outPag.value.replace(/(.*\/)*([^.]+)/i, '$2'))const pagFile = await PAG.PAGFile.load(file)const canvas = document.getElementById('pag') as HTMLCanvasElementcanvas.width = pagFile.width()canvas.height = pagFile.height()const pagView = await PAG.PAGView.init(pagFile, '#pag')pagView?.isPlaying ? pagView?.pause() : pagView?.play()})})
</script>

PAG格式是什么文件相关推荐

  1. C++ Opencv 读取指定路径中的所有文件(图片)及指定路径中指定格式的所有文件(图片)

    读取指令路径下的所有文件,程序如下: #include <io.h> #include < fstream> #include < string> #include ...

  2. python使用fpdf生成发票格式的pdf文件包含:文字、图片logo、表格、条形码等;

    python使用fpdf生成发票格式的pdf文件包含:文字.图片logo.表格.条形码等: pip install fpdf #python使用fpdf生成发票格式的pdf文件包含:文字.图片logo ...

  3. 如何制作chm格式的帮助文件

    我们经常需要为应用程序制作chm格式的帮助文件.一般都会通过微软提供的HTML Help Workshop这个软件来完成. 该工具的下载地址是: http://www.microsoft.com/do ...

  4. 创建Unicode格式的INI文件

    前段时间由于开发一个软件,需要调用别人的接口,虽然我的软件是Unicode编码,对方的模块也是Unicode编码,但是对方提供的接口却是Ansi接口,在非中文系统下,由于涉及到中文路径,导致Ansi和 ...

  5. C#获取文件夹下指定格式的所有文件

    C#获取文件夹下指定格式的所有文件的方法,虽然很简单,但还是分享一下吧,用到时可以稍加修改和优化就可以使用. 获取指定目录下所有文件 //最要使用 System.IO.Directory.GetFil ...

  6. python解析log文件_python解析基于xml格式的日志文件

    大家中午好,由于过年一直还没回到状态,好久没分享一波小知识了,今天,继续给大家分享一波Python解析日志的小脚本. 首先,同样的先看看日志是个啥样. 都是xml格式的,是不是看着就头晕了??没事,我 ...

  7. python文件写入字典格式输出_Python把对应格式的csv文件转换成字典类型存储脚本的方法...

    该脚本是为了结合之前的编写的脚本,来实现数据的比对模块,实现数据的自动化!由于数据格式是定死的,该代码只做参考,有什么问题可以私信我! CSV的数据格式截图如下: readDataToDic.py源代 ...

  8. yuv编码成h264格式写成文件

    yuv编码成h264格式写成文件 (使用ffmpeg 编码yuv420p编码成h264格式) #include <stdio.h> #include <stdlib.h> #i ...

  9. Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档

    Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪 前置条件 安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...

最新文章

  1. php获取等于符号后面的参数,php获取URL中带#号等特殊符号参数的解决方法
  2. Web技术栈中不可或缺的Linux技术
  3. 多项式模2运算及求逆元
  4. Facebook 架构学习
  5. java 以什么开头_判断字符串以什么开头
  6. netty java开发文档_《Netty官方文档》设置开发环境
  7. SAP Cloud for Customer的employee创建会自动生成Business partner
  8. 牛顿插值法及其C++实现
  9. 在leveldb中,为什么要有immutable memtable?
  10. 基于visual Studio2013解决面试题之0410计算二进制中1的个数
  11. android中dip、dp、px、sp和屏幕密度
  12. python替换UTF-8编码文本中任意特殊字符,包括中文符号问题:大量文本,将其中的特殊字符用空
  13. 未使用的分配java,最近最久未使用页面淘汰算法———LRU算法(java实现)
  14. 【渝粤教育】电大中专药剂学基础知识 (2)作业 题库
  15. Divisibility题解
  16. 网易云音乐登陆显示服务器错误,网易云音乐-登录业务流程还原
  17. Linux安装Tomcat8并启动或停止tomcat服务
  18. 最优秀最合理2019年移动便携图形工作站配置探讨
  19. mysql binlog 查看pos点_如何寻找主库binlog和pos点
  20. 一个不常用的DOM原生API,closest

热门文章

  1. 关于nginx启用HTTP2后出现ERR_HTTP2_INADEQUATE_TRANSPORT_SECURITY错误的解决方案
  2. python文本筛选_使用python对多个txt文件中的数据进行筛选的方法
  3. oracle安装问题--需要安装.net Framework 3.5的问题
  4. 知识分享 | mysql服务器启动后,为啥有mysqld_safe和mysqld 2个进程?
  5. matlab函数汉化方法
  6. 耀之阳电商:店铺权重的优化提升
  7. HTML入门与HBuliderX下载安装及使用
  8. Matlab字符串拼接
  9. java 字符串转utc时间_在Java中将UTC时间转换为本地时区
  10. ThinkPHP框架制作的土豪金风格装修公司装饰公司整站源码