需求说明
前端实现视频截取片段，并转换为gif图片下载到本地
参考文档
HTML5 CSS3 诱人的实例 ：模仿优酷视频截图功能
github antimatter15
结果说明
纯前端通过canvas截帧并可以保存为gif形式当前在移动端chrome、safari浏览器支持较好。
demo展示
canvas截图图片实例
- 截取图片
在截取视频之前，首先进行了截取图片的尝试。截取图片或者视频主要使用了canvas的CanvasRenderingContext2D.drawImage()MDN说明该函数可以在canvas画布上绘制图像，绘制图像后通过HTMLCanvasElement.toDataURL()函数返回一个包含图片展示的dataUrlMDN说明
this.canvas = document.createElement("canvas”);
this.ctx = this.canvas.getContext("2d”);
this.ctx.drawImage( this.img,0,0,this.Width, this.Height,0,0,this.Width,this.Height);
let dataUrl = this.canvas.toDataURL("image/png”);
- 转成gif下载
转成gif下载主要使用了jsgif中的如下代码，引入了 如下JS文件
<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>
<script type="text/javascript" src="b64.js"></script>
QQ20171121-192529@2x.png
这里需要注意的是
encoder.addFrame(context);中传递的context参数，文档中说或者是canvas元素，或者是imageData形式。那么imageData.data类型要怎么获取到呢？通过函数CanvasRenderingContext2D.getImageData()MDN说明,该函数可以返回一个imageDataMDN说明对象，ImageData.data是[Uint8ClampedArray]类型，描述了一个一维数组，包含以 RGBA 顺序的数据，数据使用（包含）的整数表示。将ImageData.data传入encoder.addFrame即可，这样就实现了canvas截图后并将其转成gif形式。
let context = this.ctx.getImageData(0,0,this.Width,this.Height).data
var encoder = new GIFEncoder();
encoder.setRepeat(0); //0 -> loop forever
//1+ -> loop n times then stop
encoder.setDelay(10); //这里单张图片并不需要用到，用于设置帧数间隔时间
encoder.start();
encoder.setSize(640, 430); //此处应和canvas获得的图片尺寸一致
encoder.addFrame(context, true);
encoder.finish();
encoder.download("download.gif");
- gif下载
单张图片是完全没有必要下载成gif的，这个主要是为了视频截取而准备，在GIFEncoder.js中，主要采用如下代码实现了图片下载。
ar templink = document.createElement("a");
templink.download=filename;//filename = ‘download.gif'
templink.href= URL.createObjectURL(new Blob([new Uint8Array(out.bin)], {type : "image/gif" } ))
console.log(templink)
templink.click()
在上面代码中templink得到的是如下一个超链接标签，在chrome中执行click()会直接下载该文件，safari则会打开一个新的页面
<a download="download.gif" href="blob:http://xxxxxx:3023/12465504-7074-466a-8828-29ee44848612"></a>
上面创建下载链接主要是采用了URL.createObjectURL()对象MDN说明
MDN上说该静态方法会创建一个 [DOMString]其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 [document]绑定。这个新的URL 对象表示指定[File]对象或 [Blob]对象
Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。 File 接口基于Blob，继承了 blob的功能并将其扩展使其支持用户系统上的文件对象
这里对Blob的理解并不深刻，上面获取的href地址从测试结果来看，uc、QQ等浏览器是不支持其打开预览下载的。所以这个合成gif并下载的功能在chrome和safari可支持使用。
canvas截取视频实例
截取视频和截取图片的区别在于视频是多次截取拼成gif图片，在截图、转成GIF、下载与截取图片所用核心代码基本一致，差别只在于视频需要设置起始于结束时间，该时间段内setInterval循环绘制canvas图片，循环绘制后，生成imageData.data的数组，该数组循环调用encoder.addFrame(context, true)方法。
事件主要代码如下：
var draw = new drawVideo($('video')[0]);
document.getElementById('j_begin').addEventListener('click',()=>{
document.getElementById('video').currentTime = startTime;
document.getElementById('video').play();
var time = setInterval(()=>{
draw.paint();
document.getElementById('video').play(); //每次绘制完需要将视频播放
if(document.getElementById('video').currentTime > endTime){//超过当前结束时间停止绘制canvas
console.log('stop');
clearInterval(time);
var encoder = new GIFEncoder();
encoder.setRepeat(0); //0 -> loop forever
//1+ -> loop n times then stop
encoder.setDelay(300); //这个时间的设置会影响gif展现时的速度
encoder.start();
encoder.setSize(1280, 720);//此处高度应为视频宽高
draw.result.forEach((ele,index)=>{
encoder.addFrame(ele, true);//循环添加canvas的每一帧合成gif
})
encoder.finish();
encoder.download("download.gif");
}
},1500);//1500秒为循环时间，如果时间设置太短看，手机上卡顿特别明显，时间设置太长，生产的gif不流畅。
},false)
公众号:进击的程序茗
个人博客:
进击的程序茗
网友评论