gifshot地址
index.html 文件中引入
<script src="https://cdn.bootcdn.net/ajax/libs/gifshot/0.3.2/gifshot.js"></script><template><div class="makeGif"><div id="gif"></div></div>
</template>
<script>
export default {data() {return {imgsList: [require("@/assets/image/1.webp"),require("@/assets/image/2.webp"),require("@/assets/image/3.webp"),require("@/assets/image/4.webp"),require("@/assets/image/5.webp"),require("@/assets/image/6.webp"),],gifWidth: 300, // GIF宽度gifHeight: 300, // GIF高度gitTime: 0.5, //每帧捕获之间等待的时间（以秒为单位）};},created() {this.createGIF();},methods: {createGIF() {gifshot.createGIF({gifWidth: this.gifWidth, // GIF宽度gifHeight: this.gifHeight, // GIF高度images: this.imgsList, // 需要的图片数组interval: this.gitTime, // 每帧捕获之间等待的时间（以秒为单位）numFrames: 100, // 用于创建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><style scoped>
.makeGif {width: 100%;height: 100%;
}
</style>
