移动端canvas实现视频截取图片并下载为gif实例调研说明

2018-01-20 本文已影响982人进击的程序茗

需求说明

前端实现视频截取片段，并转换为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)

公众号:进击的程序茗

个人博客:
进击的程序茗