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. fasta.img 是什么文件?
  2. 一步一步理解Java 企业级应用的可扩展性
  3. flink 6-检查点和水位线
  4. Ansible-playbook 部署redis主从
  5. goland 实用键
  6. C# 中打印、预览、打印机设置和打印属性的方法
  7. 内存回收算法与 Hot Spot 算法实现细节
  8. kubernetes 学习 pod相关
  9. 当面试官问你Vue响应式原理,你可以这么回答他
  10. MapReducer随笔小记
  11. HDU 1242 特殊化带结构体BFS
  12. 原生js模拟微信聊天记录
  13. LibPcap经常丢包怎么办?
  14. Gstore官网学习二:安装(笔者自带填坑)
  15. 运维与微服务结合?深度解析微服务框架Tars整体解决方案
  16. [k8s]非集群安装过程-笔记
  17. 虚拟磁盘服务错误: 卷大小太大。
  18. 帝国cms小程序插件1.0上线,支持百度/微信/抖音等小程序
  19. 软件安全防破解之字符串加密,提高破解难度让你的软件不再轻易被山寨
  20. 15分钟!一键部署Oracle 12CR2单机CDB+PDB

热门文章

  1. 学习软件测试关键的地方80%人都不清楚
  2. 精灵盛典无法登陆服务器维护,精灵盛典不能转职怎么办 精灵盛典无法转职解决方法...
  3. 粗口木马诈骗团伙需落网 该手机恶意软件流毒仍存
  4. 2021.11.30 魔方阵
  5. 基于Java的校园点餐系统的设计与实现(论文+源码)_kaic
  6. 柳七别离又伤心,行长入仕更痴情
  7. WikiOI 3269 混合背包 (动规+多重背包优化)
  8. 今年春节当微信与支付宝对决移动支付时,百度出了个新招
  9. vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播
  10. Android MediaCodec 编码使用介绍