PAG格式图片如何使用

最新推荐文章于 2024-07-17 10:55:12 发布

jinxi1112

最新推荐文章于 2024-07-17 10:55:12 发布

阅读量737

点赞数

分类专栏： Javascript 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/jinxi1112/article/details/127490037

版权

PAG 图片播放 Web环境 canvas 异步加载

关键词由CSDN通过智能技术生成

Javascript 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

<div id="pag"></div>

 async playPAG() {
            // 实例化 PAG
            const PAG = await window.libpag.PAGInit();
            // 获取 PAG 素材数据
            const src = this.headImg; // this.headImg为图片oss地址
            const buffer = await fetch(src).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();
        },