libpag/web

libpag Web

当前版本为 Alpha 版本，部分功能不够稳定

有问题可到Issues，会尽快修复

更多特性持续开发中

特性

• 支持播放矢量、位图、视频序列帧 PAG 文件

• 基于 WebAssembly

快速开始

可以用 locateFile 函数返回 .wasm 文件的路径，默认为 libpag.js 文件同目录下。

Browser（推荐）

<canvas class="canvas" id="pag"></canvas>
<script src="https://unpkg.com/libpag@latest/lib/libpag.min.js"></script>
<script>
  window.libpag.PAGInit().then((PAG) => {
    const url = 'https://pag.io/file/like.pag';
    fetch(url)
      .then((response) => response.blob())
      .then(async (blob) => {
        const file = new window.File([blob], url.replace(/(.*\/)*([^.]+)/i, '$2'));
        // Do Something.
      });
  });
</script>

EsModule

$ npm i libpag

import { PAGInit } from 'libpag';

PAGInit({
  locateFile: (file) => './node_modules/libpag/lib/' + file,
}).then((PAG) => {
  const url = 'https://pag.io/file/like.pag';
  fetch(url)
    .then((response) => response.blob())
    .then(async (blob) => {
      const file = new window.File([blob], url.replace(/(.*\/)*([^.]+)/i, '$2'));
      // Do Something.
    });
});

ESModule 引入的方式需要打包构建的时候，需要把 node_modules 下的 libpag/lib 中的 libpag.wasm 文件打包到最终产物中。并使用 locateFile 函数指向 libpag.wasm 文件

PAG Demo

// <canvas class="canvas" id="pag"></canvas>
const pagFile = await PAG.PAGFile.load(file);
document.getElementById('pag').width = await pagFile.width();
document.getElementById('pag').height = await pagFile.height();
const pagView = await PAG.PAGView.init(pagFile, '#pag');
pagView.setRepeatCount(0);
await pagView.play();

npm package 中提供了多种构建产物，可以阅读 这里 了解不同目录下产物的差别。

demo 文件夹中提供了简单的接入示例， 可以点击 这里 查看。

更多的 API 接口可以阅读 API 文档。

浏览器兼容性

Chrome	Safari
Chrome >= 87	Safari >= 11.1

Chrome 69+ 与 Firefox 等更多版本的兼容工作正在进行中

参与开发

前置工作

需要确保已经可编译 C++ libpag 库，并且安装 Emscripten 套件 和 Node 依赖

// 安装Node依赖
$ npm install

开发流程

删除项目根目录的 cmake-build-debug，执行 build.sh debug 打包 C++ 代码，每次改动 C++ 代码都需要重新打包新的 libpag.wasm 文件，执行完成之后可以通过 Tools->CMake->Reload CMake Project 刷新项目

// web/script目录下
$ cd script
// 添加执行权限
$ chmod +x ./build.sh
// 打包
$ ./build.sh debug

打包 Typescript 文件，修改 Typescript 文件会自动打包到 Javascript 文件

// web目录下
$ npm run dev

启动 HTTP 服务

// libpag根目录下
$ emrun --browser chrome --serve_root . --port 8081 ./web/demo/index.html

生产流程

执行 build.sh 脚本

// web/script目录下
$ cd script
// 添加执行权限
$ chmod +x ./build.sh
// 打包
$ ./build.sh