vue pag文件引入

官方网站：https://pag.art/
官方参考文档：https://pag.art/docs/use-web-sdk.html

1、引用包

npm i libpag

2、使用代码如下
注意 wasm文件和pag文件的地址

<template>
  <div>

<canvas style="width: 300px;height: 300px;" id="pag"></canvas>
  </div>
</template>

<script>
  import { PAGInit } from 'libpag';
  export default {
    data() {
      return {
      }
    },
 
    mounted() {
      this.initPag()//地址这样使用是错的'../assets/img/like.pag'
    
    },
    methods: {
     
      async initPag() {
        // debugger
        // 实例化 PAG，"https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.wasm"
         PAGInit({ locateFile: (file) => "./js/libpag.wasm"}).then((PAG) => {//注意wasm的引用，指向地址public/js/libpag.wasm

          var url='./js/one.pag'//地址写在public/js里
          fetch(url)
            .then((response) => response.blob())
            .then(async (blob) => {
              const file = new window.File([blob], url);
              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();

            });
          })
      },

    },
    beforeDestroy() {
      

    }
  }
</script>

<style scoped>

</style>

libpag.wasm文件，npm i libpag后在node_modules文件夹下

3、打包 iis 添加mime类型
建议全局添加

4、遇到过的错误
错误 1
libpag.wasm 地址错误，一定从新指向地址

错误2

pag文件引入地址出错，最好是放在public里

5、封装

• （1）utils文件在新增一个initpag.js,内容如下

import { PAGInit } from 'libpag';

async function initPag(url, id, num = 10) {
    // debugger
    // 实例化 PAG
    PAGInit({ locateFile: (file) => "./js/libpag.wasm" }).then((PAG) => {//注意wasm的引用

        //   var url='./js/one.pag'//地址写在public/js里
        fetch(url)
            .then((response) => response.blob())
            .then(async (blob) => {

                const file = new window.File([blob], url);
                const pagFile = await PAG.PAGFile.load(file);
                document.getElementById(id).width = pagFile.width();
                document.getElementById(id).height = pagFile.height();
                const pagView = await PAG.PAGView.init(pagFile, '#' + id);
                pagView.setRepeatCount(0);
                await pagView.play();

            });
    })
}

export default {
    initPag
}

• （2）main.js 中注册

import initpag from './utils/initpag'
Vue.prototype.initpag = initpag;

• （3）使用

 <canvas style="width: 300px;height: 300px;" id="pag"></canvas>
 
 this.initpag.initPag('./js/one.pag','pag')

6、参考地址
pag使用参考地址：https://blog.csdn.net/l2345432l/article/details/127851665

https://blog.csdn.net/weixin_70497099/article/details/131223029?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-131223029-blog-127851665.235%5Ev38%5Epc_relevant_anti_vip&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-131223029-blog-127851665.235%5Ev38%5Epc_relevant_anti_vip&utm_relevant_index=2

引用pag文件地址 参考地址：https://blog.csdn.net/weixin_72459962/article/details/128862989?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-128862989-blog-131852009.235%5Ev38%5Epc_relevant_anti_vip&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-128862989-blog-131852009.235%5Ev38%5Epc_relevant_anti_vip&utm_relevant_index=2

7、pag更改文字和图片

async changePag() {
        // 实例化 PAG，"https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.wasm"
        PAGInit({ locateFile: (file) => "./js/libpag.wasm" }).then((PAG) => {//注意wasm的引用，指向地址public/js/libpag.wasm

          // var url='./js/simple_text.pag'//地址写在public/js里
          var url = './js/test.pag'//地址写在public/js里
          fetch(url)
            .then((response) => response.blob())
            .then(async (blob) => {
              const file = new window.File([blob], url);
              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();
              
               //图片
              const image = await new Promise((resolve) => {//加载图片
                const img = new Image();
                img.onload = () => resolve(img);
                img.src = './js/bofang.png';//只能使用外部引用地址
              })
              const afterPagFile = await PAG.PAGFile.load(file);

              const editableImage = afterPagFile.numImages();
              console.log(editableImage)//图片数量

              const pagImage = PAG.PAGImage.fromSource(image);
              afterPagFile.replaceImage(0, pagImage);//替换图片              
              // const afterCanvas = document.getElementById('pag2');
              // document.getElementById('pag2').width = pagFile.width();
              // document.getElementById('pag2').height = pagFile.height();
              
              const afterPagView = await PAG.PAGView.init(afterPagFile, '#pag2');
              afterPagView.setRepeatCount(0);
              await afterPagView.play();


                //文字更改
              //        //const file = new window.File([blob], url);
                    // const afterPagFile = await PAG.PAGFile.load(file);
                    console.log(afterPagFile.numTexts());//获取有几个文字
                    const textDoc = afterPagFile.getTextData(0);
                    textDoc.text = '123';
              //       textDoc.fillColor = { red: 255, green: 255, blue: 255 };
              // textDoc.applyFill = true;
              // textDoc.backgroundAlpha = 100;
              // textDoc.backgroundColor = { red: 255, green: 0, blue: 0 };
              // textDoc.baselineShift = 200;
              // textDoc.fauxBold = true;
              // textDoc.fauxItalic = false;
              // textDoc.fontFamily = 'PingFang SC';
              // textDoc.fontSize = 100;
              // // textDoc.justification = window.libpag.types.ParagraphJustification.CenterJustify;
              // textDoc.strokeWidth = 20;
              // textDoc.strokeColor = { red: 0, green: 0, blue: 0 };
              // textDoc.applyStroke = true;
              // textDoc.strokeOverFill = true;
              // textDoc.tracking = 600;
                    afterPagFile.replaceText(0, textDoc);

                    const afterCanvas = document.getElementById('pag2');
                    document.getElementById('pag2').width = afterPagFile.width();
                    document.getElementById('pag2').height = afterPagFile.height();
                    const afterPagViewtext = await PAG.PAGView.init(afterPagFile, '#pag2');
                    afterPagViewtext.setRepeatCount(0);
              await afterPagViewtext.play();


            });
        })
      },

注意：更换的图片地址也只能放在public中
效果