js剪辑视频使用gif.js生成GIF效果

效果展示

文件文档及下载地址：

视频上传此处省略，简单说下实现方式，当视频上传完成后，赋值给video，通过监听canplaythrough事件来执行对视频的处理，然后通过画布裁剪为图片数组，然后通过gif.js生成GIF。 video的crossOrigin属性一定要配置，视频要自动播放，否则触发不了canplaythrough事件！

<script type="text/javascript" src="/js/gif.js"></script>//文件引入
	//response.object为后端返回的视频url、此处为处理方法
	$("#video").attr(src,response.object);
		$("#video").attr(crossOrigin,Annoymous);//一定要设置，否则会报跨域错误
		$(#video)[0].addEventListener("canplaythrough", function (evt) {
          
   
			//要执行的函数内容
			console.log(evt)
			console.log($(#video)[0].duration+秒)
			console.log(宽：+$(#video)[0].videoWidth + 高：+$(#video)[0].videoHeight);
			myFunction()//GIF生成事件
		});

function myFunction(){
          
   
       $(#output).children().remove()//接收画布生成图片的数组
       $(.imgDiv).children().remove()//动图展示标签
       var audioElement = new Audio($(#video)[0].src);//audio也可获取视频的时长
       var duration;
       var often =5;//生成GIF截取的视频长度
       audioElement.addEventListener("loadedmetadata", function (_event) {
          
   
           duration = audioElement.duration;
           if (duration<5){
          
   
               $.messager.progress(close);
               $.messager.show({
          
   
                   title : "提示",
                   msg : 视频内容太短，请重新上传
               });
           }
       });
	//GIF生成主要方法
	var time=setInterval(()=>{
          
   
		if($(#video)[0].currentTime>5) {
          
   
			clearInterval(time)
			var gif = new GIF({
          
   
				workers: 1,
				quality: 1,
                width: $(#video)[0].videoWidth,//GIF宽高保持一致，防止失真
                height: $(#video)[0].videoHeight,
				workerScript: /js/gif.worker.js
			});
			for(var i=0; i<$(#output img).length; i++){
          
   
				gif.addFrame($(#output img)[i],{
          
   copy:true,delay:110});//复制像素，延迟
			}
			console.log(生成gif中。。)
			gif.on(finished, function(blob) {
          
   
				// window.open(URL.createObjectURL(blob));
				//生成图片链接
				var url = URL.createObjectURL(blob);
				console.log(url)
				var img = document.createElement("img");
				img.src=url
				$(.imgDiv).append(img)//页面展示
                
			})
			gif.render()
		}else{
          
   
			var canvas = document.createElement("canvas");
			var output = document.getElementById("output");
			canvas.width = $(#video)[0].videoWidth;
			canvas.height = $(#video)[0].videoHeight;
			canvas.getContext(2d).drawImage($(#video)[0], 0, 0, canvas.width, canvas.height);
			var img = document.createElement("img");
			img.src = canvas.toDataURL("image/png");
			output.appendChild(img);
		}
	},100)

}