js上传视频捕捉前几帧生成gif图片

右边是上传的视频，最下面是生成的gif图片生成的是动图

<body>
<input type="file" name="" id="" value="" onchange="video(this)"/>
<video  controls="controls" id="video" controls autoplay  width="200" height="300"></video>
<div id="output" style="display: none;"></div>
<div class="imgDiv"></div>
<script src="plugin/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="dist/gif.js" type="text/javascript" charset="utf-8"></script>
</body

function video(obj){
	console.log($(obj))
	var fileObj = $(obj)[0].files[0];
	var videoUrl = URL.createObjectURL(fileObj);
	var videoObj = document.createElement("video");
	$('#video').attr('src',videoUrl)
	$('#video')[0].addEventListener("canplaythrough", function (evt) {
	  //要执行的函数内容
	    console.log(evt)
		console.log($('#video')[0].duration+'秒')
		console.log('宽：'+$('#video')[0].videoWidth + '高：'+$('#video')[0].videoHeight);
		myFunction()
	});
}
function myFunction(){
	var imgArr=[]
	var time=setInterval(()=>{
    if($('#video')[0].currentTime>3){
		clearInterval(time)
		var canvasgif= document.createElement("canvas");
	    var ctx = canvasgif.getContext('2d');
		var gif = new GIF({
		workers: 1,
		quality: 1,
		workerScript:'./dist/gif.worker.js'
	  });
	  console.log($('#output img').length)
	  for(var i=0; i<$('#output img').length; i++){
		gif.addFrame($('#output img')[i],{copy:true,delay:50});
	  }
	  gif.on('finished', function(blob) {
		//生成图片链接
		var url = URL.createObjectURL(blob);
		console.log(url)
		var img = document.createElement("img");
		img.src=url
		$('.imgDiv').append(img)
	  })
	  gif.render()	
   }else{
	  var scale = 0.3;
	  var canvas = document.createElement("canvas");
	  var output = document.getElementById("output");
	  canvas.width = $('#video')[0].videoWidth * scale;
	  canvas.height = $('#video')[0].videoHeight * scale;
	  canvas.getContext('2d').drawImage($('#video')[0], 0, 0, canvas.width, canvas.height);
	  var img = document.createElement("img");
	  img.src = canvas.toDataURL("image/webp",3);
	  imgArr.push(img.src)
	  output.appendChild(img);
	}
},100)
				
}

这里是监听到上传的视频获取上传视频的属性然后让视频自动播放currentTime 是监听视频播放到的时间点这里是判断时间不大于3秒时每100毫秒执行一次生成一张图片相当于帧数当过了3秒后停止生成图片开始循环生成的图片利用 gif.js 生成gif图片，把所有生成的图片整合生成了gif图

gif的方法说明

var gif = new GIF({
              workers: 2,//启用两个worker。
              quality: 10//图像质量
              workerScript:'./gif.worker.js'
            });//创建一个GIF实例
            
            // 核心方法，向gif中加一帧图像，参数可以是img/canvas元素，还可以从ctx中复制一帧
            gif.addFrame(imageElement);
            
            // or a canvas element
            gif.addFrame(canvasElement, {delay: 200});//一帧时长是200
            
            // or copy the pixels from a canvas context
            gif.addFrame(ctx, {copy: true});
            
            gif.on('finished', function(blob) {//最后生成一个blob对象
              window.open(URL.createObjectURL(blob));
            });
            
            gif.render();//开始启动

js上传视频捕捉前几帧生成gif图片

猜你喜欢