English | 简体中文 | Homepage

The current version is Alpha version, some APIs is not stable enough.

If there is any problem, please go to Issues reported, we will be fixed as soon as possible.

More features are under development.

Introduction

libpag is a real-time rendering library for PAG (Portable Animated Graphics) files that renders both vector-based and raster-based animations across most platforms, such as iOS, Android, macOS, Windows, Linux, and Web.

Features

• Support all libpag features on the Web environment

• Based on WebAssembly and WebGL.

Quick start

You could use the locateFile function to return the path of libpag.wasm file, the default path is the same as libpag.js 's path.

Browser (Recommend)

<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.
    });
});

If you use ESModule to import SDK, you have to build the web program including the libpag.wasm file that is under node_modules folder. Then use the locateFile function to return the path of the libpag.wasm .

PAG Demo

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

Offer much product in the npm package after building. You could read the doc about them.

More doc such as demo, API.

Browser

| Chrome | Safari | Chrome for Android | Safari on iOS | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | Chrome >= 69 | Safari >= 11.3 | Android >= 7.0 | iOS >= 11.3 |

More versions will be coming soon.

Roadmap

The roadmap doc of the PAG web SDK.

Development

Dependency Management

Need installed C++ deps about libpag, Emscripten, and Node.

$ npm install

Debug

Execute build.sh debug to get libpag.wasm file.

# ./web/script/
$ cd script
$ chmod +x ./build.sh
$ ./build.sh debug

Build Typescript file.

# ./web/
$ npm run dev

Start HTTP server.

# ./
$ emrun --browser chrome --serve_root . --port 8081 ./web/demo/index.html

release

# ./web/script
$ cd script
$ chmod +x ./build.sh
$ ./build.sh

Build with CLion

Create a new profile, and use the following CMake options（find them under CLion > Preferences > Build, Execution, Deployment > CMake）

CMAKE_TOOLCHAIN_FILE=path/to/emscripten/emscripten/version/cmake/Modules/Platform/Emscripten.cmake

Test

Build release version

$ cd script & ./build.sh

Start test HTTP server.

$ npm run server

Start cypress test.

$ npm run test