vue使用gitshot生成gif问题
更新时间:2024年03月06日 09:43:57 作者:baorant在写代码
这篇文章主要介绍了vue使用gitshot生成gif问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题背景
本文将介绍vue中使用gitshot生成gif。
问题分析
解决思路
使用input组件上传一个视频,获取视频文件后用一个video组件进行播放,播放过程进行截图生成图片数组。
demo演示上传一个视频,然后生成对应的gif。
注意事项
html中使用video标签调用本地视频结果只有音频没有视频画面问题?
解决思路
html中 video 标签支持的视频格式,一共支持三种格式:
- Ogg
- MPEG4
- WebM
但这三种格式对于浏览器的兼容性却各不同。
比如MP4格式,MP4只是一个容器,里面还有一个叫编码器的东西。
格式虽然都是MP4但是html中只支持H.264的编码格式。
所以要用软件来转码。
- MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
- WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
- Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器。
可使用格式工厂软件对本地视频格式进行处理。
问题解决
(1)安装所需的npm包
npm install gifshot --save
(2)完整代码如下:
<template> <div style="display: flex; flex-direction: column;"> <!-- 选择要上传的视频 --> <div style="display: flex;"> <input type="file" ref="videoInput" accept="video/mp4" style="margin: 15px;"> <button @click="handleFileChange" style="height: 30px; width: 50px; margin: 15px;">确定</button> </div> <video style="width: 400px;height: 400px; margin: 15px;" ref="videoRef" :src="videoUrl" controls> </video> <div style="margin: 15px;">输出gif如下:</div> </div> </template>
<script> import gifshot from 'gifshot'; export default { data() { return { videoUrl: null, interval: null, clipImgs: [], delay: 200, } }, methods: { handleFileChange() { // 获取选择的视频文件 this.selectedVideo = this.$refs.videoInput.files[0]; console.log(this.selectedVideo); if (!this.selectedVideo) { console.log('请选择文件'); return; } this.videoUrl = ''; this.convertFileToBase64(this.selectedVideo) .then(base64Data => { this.videoUrl = base64Data; console.log('this videoUrl', this.videoUrl); this.start() //视频截图并转成gif }) .catch(error => { console.error('Error:', error); }); }, // 文件转成base64 convertFileToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); }, // base64转image getImageFromBase64(base64Image) { return new Promise((resolve, reject) => { const img = new Image(); img.src = base64Image; img.onload = () => resolve(img); img.onerror = reject; }); }, start() { console.log('start'); // 每次开始重置以下值 clearInterval(this.interval); let video = this.$refs.videoRef; //获取video元素 console.log('start', video); video.addEventListener('canplay', function () { console.log('canplay', video); video.play(); }); let that = this; video.addEventListener('play', function () { var canvas = document.createElement('canvas'); // 根据视频大小调整画布尺寸 canvas.width = video.videoWidth; canvas.height = video.videoHeight; console.log('play', video); // 获取上下文对象 var context = canvas.getContext('2d'); this.interval = setInterval(() => { context.drawImage(video, 0, 0); // 将视频内容绘制到画布上 let screenshotDataURL = canvas.toDataURL(); // 转成Base64 console.log(screenshotDataURL, that.clipImgs); that.clipImgs.push(screenshotDataURL) //把所有截图放到一个数组里 }, that.delay) }); // 监听视频播放结束后,说明截图完成。定时器停止,清除定时器缓存,开始转换。 video.addEventListener('ended', function (e) { console.log('stop'); clearInterval(this.interval) this.interval = null that.makeGIF() }) }, async makeGIF() { // 使用gifshot,将图片数组转成gif gifshot.createGIF({ gifWidth: 200, gifHeight: 200, images: this.clipImgs, interval: 0.1, numFrames: 10, frameDuration: 1, fontWeight: 'normal', fontSize: '16px', fontFamily: 'sans-serif', fontColor: '#ffffff', textAlign: 'center', textBaseline: 'bottom', sampleInterval: 10, numWorkers: 2 }, function (obj) { console.log(obj, " obj"); if (!obj.error) { let image = obj.image; let animatedImage = document.createElement('img'); animatedImage.src = image; animatedImage.style = 'margin: 15px'; document.body.appendChild(animatedImage); } }); } } } </script>
运行结果如下:
选择本地视频文件,确定选择会播放该视频,播放完成生成对应的gif文件。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
最新评论