[发明专利]一种web前端视频的分帧与图片处理合成方法及系统

说明书

本发明给出了一种web前端视频的分帧与图片处理合成方法及系统，包括通过使用video对象接收在线或者上传的视频文件或者视频流，实现了在线或实时的视频流分帧，同时利用HTML5的canvas画布，在web前端实现对video画面的处理，针对得到的帧图片基于离屏canvas算法，在离屏画布中进行渲染，提高了渲染性能，在web前端实现了对分帧得到的帧图片的处理以及合成，同时可实现字幕添加，其字幕背景可根据图片色调自动识别与设置。并且，以上实现过程采用web方式，无需下载安装软件，可以直接双击本地index.html打开，或者在线服务器部署。

技术领域

本发明涉及视频分帧技术领域，尤其是一种web前端视频的分帧与图片处理合成方法及系统。

背景技术

交警在查看视频时，希望将视频分帧获取视频的各帧图片，选择某一张，框选出图片的片段置于图片任意位置，然后添加一行带背景的任意文字，最后合成并生成一张图片。

市面上的分帧软件，基于离线视频文件进行分帧，缺乏对在线或实时视频流的支持，缺乏对分帧后的后续图片处理的能力。市面上的分帧软件基本是桌面程序的形式，需要进行下载安装，较为繁琐，且存在分帧解析时间长的问题。

发明内容

本发明提出了一种web前端视频的分帧与图片处理合成方法及系统，以解决上文提到的现有技术的缺陷。

在一个方面，本发明提出了一种web前端视频的分帧方法，该方法包括以下步骤：

S1：使用video对象接收视频文件或视频流，基于预设的采样频率在预设的分帧范围内设置若干跳帧节点，通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组；

S2：将所述数组中的帧数据按照时间从先到后的顺序进行反转，并将各个帧数据利用其对应的img标签进行展示。

以上方法通过使用video对象接收在线或者上传的视频文件或者视频流，实现了在线或实时的视频流分帧，同时利用HTML5的canvas画布，在web前端实现对video画面的处理，实现过程无需下载安装软件，可以直接双击本地index.html打开，或者在线服务器部署。

在具体的实施例中，所述使用video对象接收视频文件或视频流包括：

通过视频流协议或通过本地上传视频文件的方式获取到视频文件或视频流，将所述视频文件或视频流加载到video对象中。

在具体的实施例中，所述通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，具体包括：

将所述视频文件或视频流截成多段，每次同时将所述多段中的若干段读取到线程中，利用多线程对所述若干段同步进行跳帧。采用分段分帧的方法，提高了分帧效率和速度。

在具体的实施例中，所述将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组具体包括：

通过canvas画布的drawImage api将所述video画面在canvas画布中绘制出对应的帧图片；

通过toDataURL获取所述帧图片的base64位数据，存储到堆栈thumbnails中。

在具体的实施例中，所述S2具体包括：

基于Vue.js的双向绑定，将所述数组中的帧数据与img标签进行绑定；

通过reverse方法将所述数组中的帧数据按照时间从先到后的顺序进行反转。

根据本发明的第二方面，本发明提出了一种web前端视频的帧图片处理合成方法，该方法包括以下步骤：