PAG格式是什么文件
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格式是什么文件相关推荐
- C++ Opencv 读取指定路径中的所有文件(图片)及指定路径中指定格式的所有文件(图片)
读取指令路径下的所有文件,程序如下: #include <io.h> #include < fstream> #include < string> #include ...
- python使用fpdf生成发票格式的pdf文件包含:文字、图片logo、表格、条形码等;
python使用fpdf生成发票格式的pdf文件包含:文字.图片logo.表格.条形码等: pip install fpdf #python使用fpdf生成发票格式的pdf文件包含:文字.图片logo ...
- 如何制作chm格式的帮助文件
我们经常需要为应用程序制作chm格式的帮助文件.一般都会通过微软提供的HTML Help Workshop这个软件来完成. 该工具的下载地址是: http://www.microsoft.com/do ...
- 创建Unicode格式的INI文件
前段时间由于开发一个软件,需要调用别人的接口,虽然我的软件是Unicode编码,对方的模块也是Unicode编码,但是对方提供的接口却是Ansi接口,在非中文系统下,由于涉及到中文路径,导致Ansi和 ...
- C#获取文件夹下指定格式的所有文件
C#获取文件夹下指定格式的所有文件的方法,虽然很简单,但还是分享一下吧,用到时可以稍加修改和优化就可以使用. 获取指定目录下所有文件 //最要使用 System.IO.Directory.GetFil ...
- python解析log文件_python解析基于xml格式的日志文件
大家中午好,由于过年一直还没回到状态,好久没分享一波小知识了,今天,继续给大家分享一波Python解析日志的小脚本. 首先,同样的先看看日志是个啥样. 都是xml格式的,是不是看着就头晕了??没事,我 ...
- python文件写入字典格式输出_Python把对应格式的csv文件转换成字典类型存储脚本的方法...
该脚本是为了结合之前的编写的脚本,来实现数据的比对模块,实现数据的自动化!由于数据格式是定死的,该代码只做参考,有什么问题可以私信我! CSV的数据格式截图如下: readDataToDic.py源代 ...
- yuv编码成h264格式写成文件
yuv编码成h264格式写成文件 (使用ffmpeg 编码yuv420p编码成h264格式) #include <stdio.h> #include <stdlib.h> #i ...
- Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪 前置条件 安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...
最新文章
- fasta.img 是什么文件?
- 一步一步理解Java 企业级应用的可扩展性
- flink 6-检查点和水位线
- Ansible-playbook 部署redis主从
- goland 实用键
- C# 中打印、预览、打印机设置和打印属性的方法
- 内存回收算法与 Hot Spot 算法实现细节
- kubernetes 学习 pod相关
- 当面试官问你Vue响应式原理,你可以这么回答他
- MapReducer随笔小记
- HDU 1242 特殊化带结构体BFS
- 原生js模拟微信聊天记录
- LibPcap经常丢包怎么办?
- Gstore官网学习二:安装(笔者自带填坑)
- 运维与微服务结合?深度解析微服务框架Tars整体解决方案
- [k8s]非集群安装过程-笔记
- 虚拟磁盘服务错误: 卷大小太大。
- 帝国cms小程序插件1.0上线,支持百度/微信/抖音等小程序
- 软件安全防破解之字符串加密,提高破解难度让你的软件不再轻易被山寨
- 15分钟!一键部署Oracle 12CR2单机CDB+PDB
热门文章
- 学习软件测试关键的地方80%人都不清楚
- 精灵盛典无法登陆服务器维护,精灵盛典不能转职怎么办 精灵盛典无法转职解决方法...
- 粗口木马诈骗团伙需落网 该手机恶意软件流毒仍存
- 2021.11.30 魔方阵
- 基于Java的校园点餐系统的设计与实现(论文+源码)_kaic
- 柳七别离又伤心,行长入仕更痴情
- WikiOI 3269 混合背包 (动规+多重背包优化)
- 今年春节当微信与支付宝对决移动支付时,百度出了个新招
- vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播
- Android MediaCodec 编码使用介绍