一种图像播放处理方法技术

本发明专利技术实施例涉及一种图像播放处理方法，所述方法包括：浏览器载入图像播放页面的可执行脚本文件；在浏览器的显示页面上创建第一、第二、第三图像组件、文件输入组件、顺序播放组件、倒序回放组件；若文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列；若顺序播放组件的onc l i ck事件被激活则根据图像地址序列和第一、第二、第三图像组件进行图像顺序播放处理；若倒序回放组件的onc l i ck事件被激活则根据图像地址序列和第一、第二、第三图像组件进行图像倒序回放处理。通过本发明专利技术，可以解决常规方案中帧间黑屏的问题，从而达到提高图片播放流畅度及稳定性的目的。图片播放流畅度及稳定性的目的。图片播放流畅度及稳定性的目的。

【技术实现步骤摘要】
一种图像播放处理方法


[0001]本专利技术涉及数据处理
，特别涉及一种图像播放处理方法。

技术介绍

[0002]对自动驾驶系统的仿真验证需要大量的实景图像文件，这些图像文件都是通过实车路跑由摄像头拍摄获得的。在对自动驾驶系统进行仿真验证时，经常需要将某个时段连续获取的多个实景图像文件按一定的速率进行播放。当前解决仿真图片播放的技术方案基本都是基于浏览器的WEB应用解决方案，这种WEB应用解决方案是以一个图像(image，img)对象为绘图对象，每隔一个设定帧间时长更新这个绘图对象的图像地址(source，src)属性，由此来实现图像的连续播放。这种方式只有在相邻帧切换时刻才可以修改绘图对象的src属性，浏览器也只有在该src属性被修改之后才能获取下一帧图像，倘若下一帧图像过大导致浏览器获取时间过长则可能会出现帧间黑屏的问题。

技术实现思路

[0003]本专利技术的目的，就是针对现有技术的缺陷，提供一种图像播放处理方法、电子设备及计算机可读存储介质，在显示页面上构建3个完全重叠的img对象；并在进行图像顺序播放或图像倒序回本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种图像播放处理方法，其特征在于，所述方法包括：浏览器载入图像播放页面的可执行脚本文件；所述可执行脚本文件中包括组件设置代码部分和组件事件响应代码部分；解析所述组件设置代码部分，在浏览器的显示页面上创建三个位置完全重叠的用于加载图像的第一、第二、第三图像组件，创建一个用于选择多个文件的文件输入组件，创建一个用于启动图像顺序播放的顺序播放组件，创建一个用于启动图像倒序回放的倒序回放组件；所述第一、第二、第三图像组件的高度相同都为预设的组件高度H，宽度相同都为预设的组件宽度W；所述第一、第二、第三图像组件分别对应一个原图地址和一个重叠索引；所述第一、第二、第三图像组件中，只有所述重叠索引为最大值的那个图像组件的所述原图地址对应的图像在浏览器的显示页面上可见；解析所述组件事件响应代码部分，对所述文件输入组件的onchange事件进行侦听，若所述文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列；并对所述顺序播放组件的onclick事件进行侦听，若所述顺序播放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像顺序播放处理；并对所述倒序回放组件的onclick事件进行侦听，若所述倒序回放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像倒序回放处理。2.根据权利要求1所述的图像播放处理方法，其特征在于，所述可执行脚本文件支持超文本标记语言HTML、JavaScript语言和动态服务器页面ASP语言。3.根据权利要求1所述的图像播放处理方法，其特征在于，所述组件设置代码部分中，设置三个图像img对象分别对应所述第一、第二、第三图像组件，并将所述三个图像img对象的绝对位置设为一致、高度设为一致为所述组件高度H、宽度设为一致为所述组件宽度W，从而实现所述第一、第二、第三图像组件的完全重叠；设置一个支持多文件选择的具体为文件file类型的输入input对象对应所述文件输入组件；设置两个具体为按钮button类型的输入input对象分别对应所述顺序播放组件和所述倒序回放组件；所述第一、第二或第三图像组件的所述原图地址对应图像img对象的src属性，所述第一、第二或第三图像组件的所述重叠索引对应图像img对象的z
‑
index属性。4.根据权利要求1所述的图像播放处理方法，其特征在于，所述若所述文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列，具体包括：若所述文件输入组件的onchange事件被激活，则向用户显示文件选择窗口；并在用户于所述文件选择窗口内完成多个图像文件选择并确认提交时，对用户提交的所有选中文件的文件地址与文件时间进行获取；并将各个文件地址作为对应的所述图像地址，并按对应的所述文件时间的先后顺序对所有所述图像地址进行排序生成对应的所述图像地址序列；所述图像地址序列中所述图像地址的数量默认大于3。5.根据权利要求1所述的图像播放处理方法，其特征在于，所述若所述顺序播放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像顺
序播放处理，具体包括：步骤51，若所述顺序播放组件的onclick事件被激活，则对所述图像地址序列的所述图像地址的数量进行统计生成对应的第一数量n；并初始化当前索引i为1，初始化前一索引i
p
为所述第一数量n，初始化后一索引i
a
为(i+1)；步骤52，将所述图像地址序列中索引位置与所述前一索引i
p
匹配的所述图像地址作为前帧图像地址，索引位置与所述当前索引i匹配的所述图像地址作为当前帧图像地址，索引位置与所述后一索引i
a
匹配的所述图像地址作为后帧图像地址；并设置所述第一图像组件的所述原图地址为所述前帧图像地址，设置所述第二图像组件的所述原图地址为所述当前帧图像地址，设置所述第三图像组件的所述原图地址为所述后帧图像地址；步骤53，设置所述第二图像组件的所述重叠索引大于所述第一、第三图像组件的所述重叠索引，使所述第二图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第一时间；并对实时系统时间与所述第一时间的时差是否超过预设的帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤54；步骤54，将当前索引i加1,并对新的所述当前索引i进行识别；若所述当前索引i小于所述第一数量n，则将所述后一索引i
a
设为(i+1)，并转至步骤55；若所述当前索引i等于所述第一数量n，则将所述后一索引i
a
设为1，并转至步骤55；若所述当前索引i大于所述第一数量n，则转至步骤59；步骤55，设置所述第三图像组件的所述重叠索引大于所述第一、第二图像组件的所述重叠索引，使所述第三图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第二时间；并将所述图像地址序列中索引位置与所述后一索引i
a
匹配的所述图像地址作为新的所述后帧图像地址，并设置所述第一图像组件的所述原图地址为新的所述后帧图像地址；并对实时系统时间与所述第二时间的时差是否超过所述帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤56；步骤56，将当前索引i加1,并对新的所述当前索引i进行识别；若所述当前索引i小于所述第一数量n，则将所述后一索引i
a
设为(i+1)，并转至步骤57；若所述当前索引...

【专利技术属性】
技术研发人员：熊正祥，张欢，
申请(专利权)人：苏州轻棹科技有限公司，
类型：发明
国别省市：