@shenhua/libpag v0.1.4
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.
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
2 years ago