一种海量动态面状矢量数据在浏览器上快速显示方法技术

本发明专利技术涉及动态面状矢量数据在浏览器显示领域，具体公开一种海量动态面状矢量数据在浏览器上快速显示方法，本发明专利技术通过获取用户访问动图的需求，对原始动图依次进行关键帧提取、色彩调整和尺寸裁剪，得到预览动图，并在浏览器显示，结合预览动图的属性，在保留动图关键信息的基础上对动图进行压缩，减少内存占用以提高用户点击动图的响应速度；并通过获取用户有查看预览动图详细内容的需求，对原始动图依次进行去重和分辨率调节，得到精修动图，并在浏览器显示，结合细节动图的特点，在保证动图画质的基础上对动图进行压缩，减少文件大小以提高用户查看动图详情的响应速度，从而改善用户浏览体验和提升网页的性能。用户浏览体验和提升网页的性能。用户浏览体验和提升网页的性能。

【技术实现步骤摘要】
一种海量动态面状矢量数据在浏览器上快速显示方法


[0001]本专利技术涉及动态面状矢量数据在浏览器显示领域，涉及到一种海量动态面状矢量数据在浏览器上快速显示方法。

技术介绍

[0002]动态面状矢量数据指的是包含多个面状图形元素、具有时间维度、可以随时间进行动态变化的矢量数据集合。
[0003]动图是动态面状矢量数据的一种典型应用，动图通常会占用相对较大的内存空间，其中动图的内存占用取决于动图的尺寸、分辨率、帧率以及每一帧图像的复杂程度。较大的动图文件需要更长的时间下载，会导致加载速度变慢，同时如果动图过大，浏览器可能会花费更多的时间进行解码和渲染，从而降低动图在浏览器上显示的速度。
[0004]因此，为提高动图文件在浏览器上显示的速度，需要对动图进行优化处理，以减小动图的文件大小和内存占用。
[0005]现有的针对动图在浏览器上快速显示的方法，存在一些不足：一方面，当动图文件在浏览器显示时，现有方法没有对动图文件进行优化处理，使动图文件由于内存较大而影响其在浏览器上的显示速度，或者对动图采用单一化、粗略化的处理方式，使得动图文件压缩的效果并不明显，进而使动图文件在浏览器上的显示速度无法得到实质提高。
[0006]另一方面，现有方法在对动图文件进行处理时，主要依据动图自身属性进而对动图进行优化，没有考虑到用户的观看需求、浏览器网页需求和计算机的硬件配置等，进而使得现有方法对动图进行调节处理的科学性和可靠性比较低。

技术实现思路

[0007]针对上述问题，本专利技术提出了一种海量动态面状矢量数据在浏览器上快速显示方法，具体技术方案如下：一种海量动态面状矢量数据在浏览器上快速显示方法，包括如下步骤：步骤一、用户访问动图需求获取：通过用户在浏览器界面访问的包含动图的网页地址，获取用户访问动图的需求。
[0008]步骤二、原始动图下载存储：根据用户访问动图的需求，浏览器发送HTTP请求给服务器，服务器寻找并定位到所请求的动图文件，将其作为HTTP响应发送回浏览器，浏览器进行解析和下载，得到动图文件，将其记为原始动图，并将其保存于计算机的存储设备。
[0009]步骤三、预览动图获取显示：获取原始动图中各帧图像，对原始动图中各帧图像依次进行关键帧提取、色彩调整和尺寸裁剪，得到缩略处理后的各帧图像，进一步组合得到预览动图，并将预览动图在浏览器上进行显示。
[0010]步骤四、用户查看动图需求判断：通过用户在浏览器界面点击预览动图的操作，判断用户是否有查看预览动图详细内容的需求，若有需求，则执行步骤五。
[0011]步骤五、精修动图获取显示：获取原始动图中各帧图像，对原始动图中各帧图像依次进行去重和分辨率调节，得到精修处理后的各帧图像，进一步组合得到精修动图，并将精
修动图在浏览器上进行显示。
[0012]在上述实施例的基础上，所述步骤三中对原始动图中各帧图像进行关键帧提取的具体过程包括：获取原始动图中各帧图像，将原始动图中各帧图像按照其显示时间的先后顺序进行排序。
[0013]利用图像处理技术获取原始动图中各帧图像的各动态元素和各静态元素。
[0014]将原始动图中各帧图像的各动态元素与其相邻下一帧图像的各动态元素进行比对，若原始动图中某帧图像的某动态元素与其相邻下一帧图像的某动态元素相同，则将原始动图中该帧图像的该动态元素记为原始动图中该帧图像的标记动态元素，统计得到原始动图中各帧图像的各标记动态元素。
[0015]同理，根据原始动图中各帧图像的各标记动态元素的分析方法，获取原始动图中各帧图像的各标记静态元素。
[0016]按照预设的原则在原始动图的各帧图像中建立参考坐标系。
[0017]获取原始动图中各帧图像中各标记动态元素的轮廓，按照预设的等距离原则在原始动图中各帧图像中各标记动态元素的轮廓上选取各采样点，获取原始动图中各帧图像中各标记动态元素轮廓上各采样点的位置坐标，将其记为，表示原始动图中第帧图像的编号，，表示第个标记动态元素的编号，，表示标记动态元素轮廓上第个采样点的编号，。
[0018]获取原始动图中各帧图像中各标记动态元素轮廓上各采样点在其相邻下一帧图像中的位置坐标，将其记为。
[0019]在上述实施例的基础上，所述步骤三中对原始动图中各帧图像进行关键帧提取的具体过程还包括：通过分析公式得到原始动图中各帧图像与其相邻下一帧图像的动态元素变化系数，其中表示标记动态元素轮廓上采样点的数量，表示预设的动态元素位置偏移量阈值。
[0020]同理，根据原始动图中各帧图像与其相邻下一帧图像的动态元素变化系数的分析方法，获取原始动图中各帧图像与其相邻下一帧图像的静态元素变化系数，将其记为。
[0021]通过分析公式得到原始动图中各帧图像与其相邻下一帧图像的差异指数，其中分别表示预设的动态元素和静态元素的权重因子，。
[0022]在上述实施例的基础上，所述步骤三中对原始动图中各帧图像进行关键帧提取的具体过程还包括：将原始动图中各帧图像与其相邻下一帧图像的差异指数与预设的差异指数阈值进行比较，若原始动图中某帧图像与其相邻下一帧图像的差异指数大于或等于预设的差异指数阈值，则将原始动图中该帧图像记为关键图像，并进行保留，反之，则将原始动图中该帧图像记为非关键图像，并进行删除，统计得到原始动图中各关键帧。
[0023]在上述实施例的基础上，所述步骤三中对原始动图中各帧图像进行色彩调整的具
体过程为：利用图像处理技术，得到原始动图中各关键图像中各灰度值对应的区域，将其记为原始动图中各关键图像的各颜色区域。
[0024]按照预设的原则设定颜色区域的灰度值差值范围，将原始动图中各关键图像的各颜色区域的灰度值进行相互比较，若原始动图中某关键图像中某两个颜色区域的灰度值差值在设定的灰度值差值范围内，则将原始动图中该关键图像中该两个颜色区域归类为同一个颜色区域集合，统计得到原始动图中各关键图像的各颜色区域集合。
[0025]获取原始动图中各关键图像中各颜色区域集合中各颜色区域的灰度值，对原始动图中各关键图像中各颜色区域集合中各颜色区域的灰度值进行平均值计算，得到原始动图中各关键图像中各颜色区域集合的基准灰度值，将原始动图中各关键图像中各颜色区域集合中各颜色区域的灰度值设置为其颜色区域集合对应的基准灰度值，进而对原始动图中各关键图像进行色彩调整。
[0026]在上述实施例的基础上，所述步骤三中对原始动图中各帧图像进行尺寸裁剪的具体过程为：将原始动图中色彩调整后的各关键图像记为原始动图中各待裁剪图像。
[0027]提取数据库中存储的浏览器网页中动图显示的参考尺寸，将其记为待裁剪图像的第一参考尺寸，并表示为。
[0028]获取计算机显示器屏幕的尺寸，将计算机显示器屏幕的尺寸与预设的各计算机显示器屏幕尺寸范围对应的动图显示适宜尺寸进行比对，筛选得到计算机显示器屏幕尺寸对应的动图显示适宜尺寸，将其记为待裁剪图像的第二参考尺寸，并表示为。
[0029]通过分析公式得本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种海量动态面状矢量数据在浏览器上快速显示方法，其特征在于，包括如下步骤：步骤一、用户访问动图需求获取：通过用户在浏览器界面访问的包含动图的网页地址，获取用户访问动图的需求；步骤二、原始动图下载存储：根据用户访问动图的需求，浏览器发送HTTP请求给服务器，服务器寻找并定位到所请求的动图文件，将其作为HTTP响应发送回浏览器，浏览器进行解析和下载，得到动图文件，将其记为原始动图，并将其保存于计算机的存储设备；步骤三、预览动图获取显示：获取原始动图中各帧图像，对原始动图中各帧图像依次进行关键帧提取、色彩调整和尺寸裁剪，得到缩略处理后的各帧图像，进一步组合得到预览动图，并将预览动图在浏览器上进行显示；步骤四、用户查看动图需求判断：通过用户在浏览器界面点击预览动图的操作，判断用户是否有查看预览动图详细内容的需求，若有需求，则执行步骤五；步骤五、精修动图获取显示：获取原始动图中各帧图像，对原始动图中各帧图像依次进行去重和分辨率调节，得到精修处理后的各帧图像，进一步组合得到精修动图，并将精修动图在浏览器上进行显示。2.根据权利要求1所述的一种海量动态面状矢量数据在浏览器上快速显示方法，其特征在于：所述步骤三中对原始动图中各帧图像进行关键帧提取的具体过程包括：获取原始动图中各帧图像，将原始动图中各帧图像按照其显示时间的先后顺序进行排序；利用图像处理技术获取原始动图中各帧图像的各动态元素和各静态元素；将原始动图中各帧图像的各动态元素与其相邻下一帧图像的各动态元素进行比对，若原始动图中某帧图像的某动态元素与其相邻下一帧图像的某动态元素相同，则将原始动图中该帧图像的该动态元素记为原始动图中该帧图像的标记动态元素，统计得到原始动图中各帧图像的各标记动态元素；同理，根据原始动图中各帧图像的各标记动态元素的分析方法，获取原始动图中各帧图像的各标记静态元素；按照预设的原则在原始动图的各帧图像中建立参考坐标系；获取原始动图中各帧图像中各标记动态元素的轮廓，按照预设的等距离原则在原始动图中各帧图像中各标记动态元素的轮廓上选取各采样点，获取原始动图中各帧图像中各标记动态元素轮廓上各采样点的位置坐标，将其记为，表示原始动图中第帧图像的编号，，表示第个标记动态元素的编号，，表示标记动态元素轮廓上第个采样点的编号，；获取原始动图中各帧图像中各标记动态元素轮廓上各采样点在其相邻下一帧图像中的位置坐标，将其记为。3.根据权利要求2所述的一种海量动态面状矢量数据在浏览器上快速显示方法，其特征在于：所述步骤三中对原始动图中各帧图像进行关键帧提取的具体过程还包括：
通过分析公式得到原始动图中各帧图像与其相邻下一帧图像的动态元素变化系数，其中表示标记动态元素轮廓上采样点的数量，表示预设的动态元素位置偏移量阈值；同理，根据原始动图中各帧图像与其相邻下一帧图像的动态元素变化系数的分析方法，获取原始动图中各帧图像与其相邻下一帧图像的静态元素变化系数，将其记为；通过分析公式得到原始动图中各帧图像与其相邻下一帧图像的差异指数，其中分别表示预设的动态元素和静态元素的权重因子，。4.根据权利要求3所述的一种海量动态面状矢量数据在浏览器上快速显示方法，其特征在于：所述步骤三中对原始动图中各帧图像进行关键帧提取的具体过程还包括：将原始动图中各帧图像与其相邻下一帧图像的差异指数与预设的差异指数阈值进行比较，若原始动图中某帧图像与其相邻下一帧图像的差异指数大于或等于预设的差异指数阈值，则将原始动图中该帧图像记为关键图像，并进行保留，反之，则将原始动图中该帧图像记为非关键图像，并进行删除，统计得到原始动图中各关键帧。5.根据权利要求4所述的一种海量动态面状矢量数据在浏览器上快速显示方法，其特征在于：所述步骤三中...

【专利技术属性】
技术研发人员：秦文汉，张峰，于凯，
申请(专利权)人：北京佰信蓝图科技股份有限公司，
类型：发明
国别省市：