vue使用，引用 腾讯pag 播放文件，且解决销毁问题

PAG官网：官网
https://pag.art/docs/sdk.html#web-%E7%AB%AF%E6%8E%A5%E5%85%A5

一、创建依赖准备

libpag.min.js
libpag.wasm

去git上下载就行了
https://github.com/Tencent/libpag/releases/tag/v4.3.3
下载 libpag_4.3.3_web.zip 里边有
两个文件放到 public 中

pag的文件也是放到public中

二、index.html引入

只引入这一个就行
<script src="libpag.min.js"></script>

三、main.js

window.libpag.PAGInit().then( res =>{
  Vue.prototype.$PAG = res

  new Vue({
    el: '#app',
    render: h => h(App),
    router,
    store
  });
})

四、新建组件组件

import CanvasPag from '@/components/CanvasPag/index.vue'

Vue.component('canvas-pag',CanvasPag)
<script>
export default {
  name: "CanvasPag",
  props: {
    canvasId: String,
    url: String,
    scaleWidth: {
      type: Number,
      default: 0.58
    },
    scaleHeight: {
      type: Number,
      default: 0.58
    },
    playNum: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      renderingId: undefined,
      pagView: undefined,
      pagFile:undefined,
      pagComposition:undefined,
    }
  },
  created() {
    this.renderingId = this.canvasId || this.randomId()
  },
  mounted() {
    this.createdPag()
  },
  methods: {
    randomId(lenNum, radixNum) {
      let len = lenNum || 32, radix = radixNum || 16
      let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
      let uuid = []
      let i
      radix = radix || chars.length
      if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
        } else {
        var r
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
        uuid[14] = '4'
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | Math.random() * 16
            uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
          }
        }
      }
      return uuid.join('')
    },
    async createdPag() {
      const PAG = this.$PAG
      let url = "/pag/" + this.url + ".pag"

      const buffer = await fetch(url).then((response) => {
        return response.arrayBuffer()
      })
      const pagFile = await PAG.PAGFile.load(buffer)
      // 设置宽高
      const pagComposition = PAG.PAGComposition.make(pagFile.width(), pagFile.height());
      // 宽高的缩放比例
      //const matrix1 = PAG.Matrix.makeScale(this.scaleWidth, this.scaleHeight);

      // 修改比例
      //pagFile.setMatrix(matrix1);
      pagComposition.addLayer(pagFile);
      const canvas = document.getElementById( this.renderingId );
      if (canvas !== null) {
        canvas.width = pagComposition.width();
        canvas.height = pagComposition.height();
        // 取消首帧渲染 https://pag.art/docs/web-play-pagfile.html
        const pagView = await PAG.PAGView.init(pagComposition, canvas, {firstFrame: false} );
        // Set PAGView play infinity.
        pagView.setRepeatCount(this.playNum);
        await pagView.play();

        this.pagView = pagView
        this.pagFile = pagFile
        this.pagComposition = pagComposition
      }
    },
    async destroy() {
      /*const pagDom = document.querySelectorAll('.pag-zk');
      if (pagDom) {
        console.log('webgl清空内容')
        await pagDom.forEach((item) => {
          const gl = item.getContext("webgl");
          gl.clear(gl.COLOR_BUFFER_BIT);
        })
      }*/
      // 销毁图片
      this.pagFile?.destroy();

      // 判断是否存在值
      if( this.pagComposition ){
        // 清空加载的图片
        this.pagComposition.removeAllLayers()
        // 销毁
        this.pagComposition.destroy();
      }
      if (this.pagView?.pagSurface) {
        await this.pagView.pagSurface.clearAll();
      }
      await this.pagView?.destroy();
    }
  },
  beforeDestroy() {
    this.destroy()
  }
}
</script>

五、页面使用

   <canvas-pag
     key="jkzt-blue"
     url="yxzz"
     style="position: absolute;top: -22px;"
   ></canvas-pag>