前端 Vue3导入本地pag格式文件 打包dist

安装libpag

npm i libpag

安装rollup-plugin-copy

npm i rollup-plugin-copy

配置rollup-plugin-copy

在vite.config.js中进行配置，目的是把加载pag文件所需的libpag.wasm复制到打的dist包中

import copy from "rollup-plugin-copy";
copy({
        targets: [
          {
            src: "./node_modules/libpag/lib/libpag.wasm",
            dest: process.env.NODE_ENV === "production" ? "dist/" : "public/",
          },
        ],
        hook:
          process.env.NODE_ENV === "production" ? "writeBundle" : "buildStart",
      })

封装函数并导入pag

script标签里引入：

import { PAGInit } from "libpag";

methods里封装函数：

// 加载pag动图到指定id的canvas
    async loadPAG(url, id, num = 0) {
      // 实例化 PAG
      const PAG = await PAGInit();
      // 获取 PAG 素材数据
      const buffer = await fetch(url).then((response) => {
        return response.arrayBuffer();
      });
      // 加载 PAG 素材为 PAGFile 对象
      const pagFile = await PAG.PAGFile.load(buffer);
      // 将画布尺寸设置为 PAGFile的尺寸
      const canvas = document.getElementById(id);
      canvas.width = pagFile.width();
      canvas.height = pagFile.height();
      // 实例化 PAGView 对象
      const pagView = await PAG.PAGView.init(pagFile, canvas);
      // 循环播放
      pagView.setRepeatCount(num);
      await pagView.play();
    }

mounted里导入本地相对路径的文件：

this.loadPAG(
      new URL("./assets/顶部_bmp.pag", import.meta.url).href,
      "topIn"
    );