一种图像渲染方法、设备及存储介质与流程

本文涉及图像处理，尤其涉及一种图像渲染方法、设备及存储介质。

背景技术：

1、随着web前端技术的飞速发展，浏览器已不再仅仅是信息展示的窗口，而是逐渐演变为承载复杂图像处理、海量数据可视化及高精度地理信息系统的核心平台。在医疗影像诊断、卫星遥感地图、超大规模工程图纸以及金融数据大屏等应用场景中，用户需要在浏览器端渲染分辨率高达数万甚至数十万像素的超大图像。然而，传统的web图像加载与渲染机制在面对此类“巨型图像”时，面临着严峻的性能瓶颈与用户体验挑战。

2、传统的canvas渲染方式需要等待完整图像数据全部下载完成后才能开始解码和绘制，这种方式存在明显缺陷，当用户进关注图像的局部区域时，仍然下载了全部不可见区域的数据，不仅会造成网络带宽的严重浪费，还会导致用户从发起请求到看到首屏内容的时间（first contentful paint, fcp）过长，尤其在网络条件较差时，长时间的白屏严重影响使用体验。

3、因此，当前亟需一种图像渲染方法解决当前web端加载大规模图存在的问题。

技术实现思路

1、针对上述技术问题，本文提供了以下技术方案：

2、第一方面，提供一种图像渲染方法，所述方法包括：

3、获取当前显示区域的视口范围，根据所述视口范围确定当前视口内可见的一个或多个图像块的坐标集合，并通过所述单一网络连接向所述服务端发送包含所述坐标集合的数据请求；

4、接收所述服务端发送的帧数据流，所述帧数据流是所述服务端响应于所述数据请求后将所述坐标集合对应的图像块封装得到的，所述帧数据流中的每个数据帧包含图像块数据及其对应的格式标识，所述格式标识用于指示该图像块所采用的压缩编码方式；

5、从所述帧数据流中依次提取每个数据帧，根据所提取的数据帧中的格式标识，对所述数据帧中的图像块数据进行解码，并根据坐标信息将解码后的图像块渲染到显示区域上。

6、根据本技术提供的一种图像渲染方法，所述客户端维护一个缓存池，所述对所述数据帧中的图像块数据进行解码，得到解码后的图像块之后，所述方法还包括：

7、以图像块的坐标信息为键，以所述解码后的图像块数据为值，将所述解码后的图像块存储至所述缓存池中；

8、当所述缓存池中存储的图像块数量达到预设容量上限时，将设定时间内被访问次数最少的图像块数据从所述缓存池中移除。

9、根据本技术提供的一种图像渲染方法，所述方法还包括：

10、当所述显示区域的视口范围发生变化时，将变化后在视口范围内不可见的图像块数据从所述缓存池中移除。

11、根据本技术提供的一种图像渲染方法，所述根据坐标信息将解码后的图像块渲染到显示区域上，包括：

12、在进行渲染时，扫描当前显示区域的视口范围内的图像块的坐标集合，检查所述缓存池中是否存在所述坐标集合对应的所述解码后的图像块；

13、若存在解码后的图像块不在所述缓存池中的缺失坐标，则将所述缺失坐标加入缺失队列，进行缺失补偿；

14、若所述缓存池中存在所述坐标集合对应的所有的所述解码后的图像块，则将所有的所述解码后的图像块根据坐标信息渲染到显示区域上。

15、根据本技术提供的一种图像渲染方法，所述缺失补偿，包括：

16、当所述缺失队列中的图像块满足补偿触发条件时，通过独立的网络连接向所述服务端发起补偿请求，所述补偿请求用于获取缺失的图像块数据；

17、接收所述服务端返回的缺失的图像块数据后存入所述缓存池，并渲染至所述显示区域。

18、根据本技术提供的一种图像渲染方法，所述补偿触发条件包括：

19、所述缺失坐标对应的图像块在所述单一网络连接上传输的帧数据流中的预期到达时间超过预设时间阈值；或者

20、所述缺失坐标对应的图像块在所述帧数据流中的数据包序号小于当前已接收的最大数据包序号。

21、根据本技术提供的一种图像渲染方法，所述通过独立的网络连接向所述服务端发起补偿请求，包括：

22、采用超文本传输协议构造与所述单一网络连接上的帧数据流传输并发执行的补偿请求，所述补偿请求中包含所述缺失坐标；

23、发送所述补偿请求以获取缺失的图像块数据。

24、根据本技术提供的一种图像渲染方法，所述通过独立的网络连接向所述服务端发起补偿请求，包括：

25、所述客户端获取服务端预先生成的索引文件，所述索引文件记录每个图像块在完整图像文件中的字节偏移量索引；

26、根据所述缺失坐标查询所述索引文件，并根据对应的字节偏移量索引构造包含字节范围的所述补偿请求；

27、发送所述补偿请求以获取缺失的图像块数据。

28、根据本技术提供的一种图像渲染方法，所述根据对应的字节偏移量索引构造包含字节范围的所述补偿请求，包括：

29、当所述缺失队列中存在多个目标图像块时，所述目标图像块为在空间位置上相邻且在其存储文件中存在物理连续分布的图像块，将多个所述目标图像块对应的字节范围合并为一个连续的字节区间；

30、构造覆盖所述合并后的字节区间的补偿请求。

31、根据本技术提供的一种图像渲染方法，所述方法还包括：

32、接收经过缺失补偿过程返回的缺失的图像块数据后，计算所述缺失的图像块数据的哈希值，并与原帧数据流中对应数据帧头部的哈希校验值进行比对；

33、若一致，则将所述缺失的图像块数据存入所述缓存池并渲染；

34、若不一致，则重新发起补偿请求或将所述缺失坐标重新加入缺失队列。

35、根据本技术提供的一种图像渲染方法，所述将所述缺失的图像块数据存入所述缓存池并渲染的过程中，所述缺失的图像块的渲染优先级最高，将所述缺失的图像块解码并绘制到显示区域上的对应坐标位置。

36、根据本技术提供的一种图像渲染方法，所述数据帧的帧头部还包括清晰度等级字段，所述清晰度等级标识用于指示所述图像块的数据精度级别，所述根据坐标信息将解码后的图像块渲染到显示区域上，包括：

37、监测用户的交互操作状态；

38、根据所述交互操作状态请求不同清晰度等级的图像块；

39、当监测到用户正在执行拖拽或缩放操作时，向所述服务端请求携带第一清晰度等级标识的图像块；当检测到用户操作停止超过预设时间阈值时，向所述服务端请求携带第二清晰度等级标识的图像块，其中，所述第一清晰度等级对应的图像块数据量小于所述第二清晰度等级对应的图像块数据量。

40、根据本技术提供的一种图像渲染方法，所述监测用户的交互操作状态，包括：

41、监听滚动事件或鼠标滚轮事件；

42、当预设时间窗口内事件触发频率超过频率阈值时，判定用户正在执行拖拽或缩放操作；

43、当在所述预设时间阈值内未检测到所述事件时，判定为用户操作停止。

44、根据本技术提供的一种图像渲染方法，所述根据所述交互操作状态请求不同清晰度等级的图像块之后，所述方法还包括：

45、当接收到第一清晰度等级的图像块时，将接收到的图像块作为占位图像绘制在对应的坐标位置；

46、当接收到同一坐标位置的第二清晰度等级的图像块时，在动画帧回调中，用所述第二清晰度等级的图像块替换已渲染的所述第一清晰度等级的图像块。

47、第二方面，提供一种图像渲染方法，应用于服务端，所述方法包括：

48、响应于客户端发送的数据请求，所述数据请求包含所述坐标集合，所述坐标集合是所述客户端获取当前显示区域的视口范围，根据所述视口范围确定的当前视口内可见的一个或多个图像块的坐标集合；所述数据请求是所述客户端通过所述单一网络连接向所述服务端发送的；

49、将坐标集合对应的图像块封装为帧数据流，所述帧数据流中的每个数据帧包含图像块数据及其对应的格式标识，所述格式标识用于指示该图像块所采用的压缩编码方式；

50、通过所述单一网络连接发送至客户端。

51、第三方面，提供一种图像渲染方法，应用于包括客户端和服务端的系统，所述方法包括：

52、控制客户端用于获取当前显示区域的视口范围，根据所述视口范围确定当前视口内可见的一个或多个图像块的坐标集合，并通过单一网络连接向服务端发送包含所述坐标集合的数据请求；

53、控制服务端用于响应于所述数据请求后将所述坐标集合对应的图像块封装得到帧数据流，所述帧数据流中的每个数据帧包含图像块数据及其对应的格式标识，所述格式标识用于指示该图像块所采用的压缩编码方式；

54、控制所述客户端用于接收所述服务端发送的帧数据流；

55、控制所述客户端用于从所述帧数据流中依次提取每个数据帧，根据所提取的数据帧中的格式标识，对所述数据帧中的图像块数据进行解码，并根据坐标信息将解码后的图像块渲染到显示区域上。

56、第四方面，提供一种设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上第一方面、第二方面或第三方面所述任一种所述图像渲染方法。

57、第五方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上第一方面、第二方面或第三方面所述的图像渲染方法。

58、本文提供一种图像渲染方法、设备及存储介质，具有以下有益效果：

59、客户端获取当前显示区域的视口范围，根据所述视口范围确定当前视口内可见的一个或多个图像块的坐标集合，并通过所述单一网络连接向所述服务端发送包含所述坐标集合的数据请求，也就是说，客户端仅请求当前视口范围内可见的图像块，无需等待整张图片下载完毕，第一个可见块到达后即可立即解码并渲染，大幅缩短了首屏时间。在解码时，根据所提取的数据帧中的格式标识，仅对当前视口内的图像块数据进行解码，从而提高图像渲染的效率。并且，在按需加载情况下也使得无效数据传输量趋近于零，显著降低了网络带宽消耗。此外，服务端与客户端利用单一长连接进行帧数据流的传输，大幅减少了协议开销，提升了首屏加载速度与弱网下的传输稳定性，实现极低协议开销的高效传输。

60、应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本文。