vue中使用gifshot生成GIF图片步骤

参考文档：gifshot官方文档

1.在index.html中引入cdn

<script src="https://cdn.bootcdn.net/ajax/libs/gifshot/0.3.2/gifshot.js"></script>

2.在vue文件中使用

<template>
  <div class="showGIF" id="showGIF">
    <div id="gif"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    	imgsList: [require("../assets/imgs/***.png"),...],
   	}
  },
  created() {
    this.createGIF();
  },
  methods: {
      createGIF() {
      gifshot.createGIF(
        {
          gifWidth: 563, // GIF宽度
          gifHeight: 395, // GIF高度
          images: this.imgsList, // 需要的图片数组
          interval: 0.1, // 每帧捕获之间等待的时间（以秒为单位）
          numFrames: 10, // 用于创建GIF的帧数
          frameDuration: 1, // 每帧停留的时间（10=1s）
          fontWeight: "normal", // 覆盖动画GIF的文本字体粗细
          fontSize: "16px", // 覆盖动画GIF的文本字体大小
          fontFamily: "sans-serif", // 字体类型
          fontColor: "#ffffff", // 字体颜色
          textAlign: "center", // 文本的水平对齐方式
          textBaseline: "bottom", // 文本的垂直对齐方式
          sampleInterval: 10, // 创建调色板时要跳过多少像素。默认值为10。“少”为佳，但较慢。
          numWorkers: 2, // 要使用多少个网络工作者来处理GIF动画帧。默认值为2。
        },
        function (obj) {
          if (!obj.error) {
            var image = obj.image,
              animatedImage = document.createElement("img");
            animatedImage.src = image;
            document.getElementById("gif").appendChild(animatedImage);
          }
        }
      );
    },
  },
};
</script>