Web端接入指南

---

SDK 的接入和使用请遵守 PAG SDK 个人信息保护规则

特性

• Web 平台能力适配，支持 libpag 全能力
• 基于 WebAssembly + WebGL

快速开始

PAG Web 端，由 libpag.js + libpag.wasm 文件组成。

<canvas class="canvas" id="pag"></canvas>
<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>
<script>
  window.onload = async () => {
    // 实例化 PAG
    const PAG = await window.libpag.PAGInit();
    // 获取 PAG 素材数据
    const buffer = await fetch('https://pag.qq.com/file/like.pag').then((response) => response.arrayBuffer());
    // 加载 PAG 素材为 PAGFile 对象
    const pagFile = await PAG.PAGFile.load(buffer);
    // 将画布尺寸设置为 PAGFile的尺寸
    const canvas = document.getElementById('pag');
    canvas.width = pagFile.width();
    canvas.height = pagFile.height();
    // 实例化 PAGView 对象
    const pagView = await PAG.PAGView.init(pagFile, canvas);
    // 播放 PAGView
    await pagView.play();
  };
</script>

浏览器兼容性

Chrome	Safari	Chrome for Android	Safari on iOS	QQ Browser Mobile
Chrome >= 69	Safari >= 11.3	Android >= 7.0	iOS >= 11.3	last 2 versions

更多版本的兼容工作正在进行中

以上的兼容表仅代表可以运行的兼容性。对于有移动端接入需要的用户，需要阅读一下这篇兼容性情况的文章

More

Web-lite：https://github.com/Tencent/libpag/tree/main/web/lite

Github：https://github.com/Tencent/libpag/blob/main/web/README.md

Web demo：https://github.com/libpag/pag-web