基于WebGL的动态高性能批量图片显示方法、系统及程序产品与流程

基于webgl的动态高性能批量图片显示方法、系统及程序产品
技术领域
1.本发明涉及关联图数据可视化领域，具体涉及一种基于webgl的动态高性能批量图片显示方法、系统以及计算机程序产品。


背景技术：

2.现有技术中，图片的渲染显示方法的设计与优化往往是针对的是网页显示环境。例如，专利公布号为cn107239287b的中国发明专利，其公开了一种网页显示方法、装置、电子设备及存储介质。该方法在超文本标记语言html页面中，确定基础canvas画布，在基础canvas画布中添加用户绘画，实现了用户基本绘画操作。在一定程度上达到了丰富网页显示以及实现用户个性化内容的网页显示效果，但是，当面临动态批量的图片显示场景时，则性能较差。常见的一类动态批量的图片显示场景为关联图数据可视化场景。
3.其中，关联图数据可视化场景指的是对多个相关联的节点的数据或节点之间的关系进行可视化显示的场景，在关联图中，节点表示实体或概念，边则表示实体之间的关联关系。关联图数据可视化技术(也被称为关联图技术)应用广泛，如关联图的布局可用于搜索引擎，将关于某节点的属性或与其它节点的关系等信息展示出来，方便人们更便捷的获取信息。例如，专利申请号为cn202110671288.5的中国专利申请，其公开了一种网络实体行为关联构建方法，其通过构建网络实体行为关联图数据，提供检索服务，能够充分利用威胁情报和漏洞知识数据，全方位地感知网络空间威胁。
4.当利用关联图数据可视化技术进行数据处理时，及时地将关于某节点的属性或与其它节点的关系等信息展示出来是该技术的核心特点之一，也是实际应用过程中的一大技术难点。在数据的可视化过程中，常常需要对节点属性中所包含的各类文本信息或图片信息进行显示。而由于在关联图数据可视化场景中节点数量以及图片信息数据量本就巨大，且对图片信息显示的及时性要求也相对较高，传统的图片渲染显示方法往往难以满足关联图数据可视化场景中的实时性要求，一旦节点数据量较多或者短时间内数据空间位置或数据的实时变化量较大时，在图片的刷新或缩放过程的卡顿现象将会愈加严重，由此严重影响用户的操作体验。


技术实现要素：

5.本发明的目的在于提供一种基于webgl的动态高性能批量图片渲染显示方法，部分地解决或缓解现有技术中的上述不足，能够大大提高了图片的批量显示效率。
6.为了解决上述所提到的技术问题，本发明具体采用以下技术方案：
7.本发明的第一方面，在于提供一种一种基于webgl的动态高性能批量图片显示方法，包括：
8.s10响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，其中至少一个所述目标节点关联有至少一个目标图片；
9.s20基于至少一个所述目标节点对应地获取到检索信息集，所述检索信息集包括：
检索值，且所述检索值包括：用于检索所述目标图片的图片数据的检索值，和/或，用于检索所述目标图片的标准缓存图片的检索值；
10.s30基于所述检索信息集获取到与至少一个所述目标图片相对应的至少一个所述标准缓存图片；
11.s40将至少一个所述标准缓存图片传送至图形处理器，并基于所述标准缓存图片显示至少一个所述目标图片；
12.其中，s30中包括：
13.s31基于至少一个所述检索值向网络发送第一请求，以获取到与所述目标图片相关的至少一份图片数据；
14.s32提供包括至少一个预设的绘制位的画布层，且所述绘制位具有标准属性，所述标准属性包括：绘制位位置，和/或绘制空间大小；
15.s33基于预设的标准格式将相对应的所述图片数据绘制在所述绘制位上，其中，所述标准格式包括：所述目标图片的标准区域和/或标准尺寸，且所述标准格式与所述标准属性相适应；
16.s34对所述绘制位中的绘制信息进行读取以生成具有标准格式的所述标准缓存图片，且所述标准缓存图片还关联有所述检索值。
17.在一些实施例中，s32包括步骤：提供所述画布层以及用于访问所述画布层的画布功能有限访问点，并基于预设的标准属性在所述画布层上设定至少一个所述绘制位；
18.对应地，s33中的所述图片数据经过所述有限访问点进入到对应的所述绘制位处。
19.在一些实施例中，s10包括：
20.响应于用户的操作从所述关联图数据可视化场景中获取至少一个节点的显示参数，且当所述显示参数符合预设的显示条件时，将所述节点识别为目标节点；其中，所述显示参数包括：所述节点的显示坐标，和/或所述节点的放大值。
21.在一些实施例中，所述检索值为统一资源定位符；
22.在一些实施例中，所述标准缓存图片为由rgba组成的二维数组。
23.在一些实施例中，在s31之前还包括：
24.针对至少一个所述目标图片的当前状态建立相应的状态信息，并将所述状态信息与所述检索值相关联，其中，所述状态信息包括：待处理，和/或处理中；
25.基于所述检索值检测所述目标图片的状态信息；
26.当所述状态信息为待处理时，则基于对应的所述检索值执行s31，并将对应的所述状态信息更新为处理中。
27.在一些实施例中，所述方法还包括：提供用于管理所述绘制位的工作状态的画布管理器；
28.其中，当所述画布管理器检测到当前获取到新的图片数据时；
29.检索所述工作状态为空闲的所述绘制位；
30.并将相应的图片绘制请求发送至对应的所述绘制位，其中所述图片绘制请求包括：被设置为标准格式的所述图片数据，并将所述绘制位的所述工作状态更新为占用；
31.当所述画布管理器检测到所述绘制位上的绘制信息已被读取时，则清除所述绘制位中的绘制信息，并将所述工作状态更新为空闲。
32.在一些实施例中，所述检索值还关联有显示优先级，相应的s10还包括步骤：基于所述显示参数确定所述目标节点的显示优先级；
33.相应的s30中基于所述显示优先级的顺序对所述图片数据和/或所述标准缓存图片进行检索。
34.在一些实施例中，在执行步骤s31之前，包括：
35.提供预先获取的缓存集，所述缓存集包括：标准缓存图片，且所述标准缓存图片与所述关联图数据可视化场景中的至少一个节点相关联；
36.基于所述检索值以及所述缓存集对所述检索信息集进行分类；
37.其中，当存在至少一个所述检索值可在所述缓存集中检索到相对应的所述标准缓存图片时，则基于所检索到的所述标准缓存图片获取到第一图片缓存集，并基于所述第一图片缓存集进入步骤s40；
38.当存在至少一个所述检索值在所述缓存集中无法检索到相对应的所述标准缓存图片时，则基于相对应的所述检索值进入步骤s31。
39.在一些实施例中，所述标准尺寸包括：标准宽以及标准高；相应地s33包括：
40.基于所述图片数据判断所述目标图片的实际宽高比与所述标准尺寸的标准宽高比是否相同，其中，所述标准宽高比为标准宽/标准高；
41.若判断结果为否，则执行步骤：
42.基于所述标准宽高比确定所述目标图片的提取区域，其中所述提取区域包括：提取大小和/或提取位置，所述提取区域为所述目标图片的标准区域；
43.提取所述提取区域所对应的所述图片数据以作为绘制数据；
44.将所述绘制数据等比绘制在所述绘制位上。
45.在一些实施例中，所述目标图片的显示尺寸与所述标准尺寸的比值在大约0.5-2之间，其中，所述显示尺寸为所述目标图片在所述关联图数据可视化场景中可以被缩小或放大的尺寸；
46.在一些实施例中，所述图片数据的格式包括以下一种或多种：jpg、jpeg、gif、png、bmp、svg、webp。
47.在一些实施例中，当存在至少一个所述检索值在所述缓存集中无法检索到相对应的所述标准缓存图片时，还包括步骤：
48.检测所述缓存集所处的缓存空间中的剩余空间大小，并判断所述剩余空间是否可以存储步骤s33中生成的所述标准缓存图片；
49.若判断结果为是，则将所述标准缓存图片存入所述剩余空间，其中所述标准缓存图片还关联有时间戳以及缓存位置；
50.若判断结果为否，则对应地触发空间清理或空间扩容。
51.在一些实施例中，所述提取大小包括：提取宽度以及提取高度，其中，当所述目标图片的实际宽高比大于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域的步骤包括：
52.以所述目标图片的高为提取高度，并基于所述提取高度和所述标准宽高比确定所述提取宽度；
53.沿所述目标图片的宽度方向确定所述提取位置；
54.基于所述提取大小和所述提取位置确定所述提取区域；
55.在一些实施例中，当所述目标图片的实际宽高比小于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域的步骤包括：
56.以所述目标图片的宽为提取宽度，并基于所述提取宽度和所述标准宽高比确定所述提取高度；
57.沿所述目标图片的高度方向确定所述提取位置；
58.基于所述提取大小和所述提取位置确定所述提取区域；
59.在一些实施例中，当所述目标图片的实际宽高比等于所述标准宽高比时，所述目标图片的整体图片数据即为所述绘制数据。
60.在一些实施例中，所述提取大小包括：提取宽度以及提取高度，其中，
61.当所述目标图片的实际宽高比大于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域的步骤包括：
62.以所述目标图片的宽为提取宽度，并基于所述提取宽度和所述标准宽高比确定所述提取高度；
63.基于所述提取大小和所述目标图片的实际尺寸确定所述提取位置；
64.基于所述提取大小和所述提取位置确定所述提取区域。
65.在一些实施例中，当所述目标图片的实际宽高比小于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域的步骤包括：
66.以所述目标图片的高为提取高度，并基于所述提取高度和所述标准宽高比确定所述提取宽度；
67.基于所述提取大小和所述目标图片的实际尺寸确定所述提取位置；
68.基于所述提取大小和所述提取位置确定所述提取区域。
69.在一些实施例中，当所述目标图片的实际宽高比等于所述标准宽高比时，所述目标图片的整体图片数据即为所述绘制数据。
70.本发明第二方面在于，还提供了一种基于webgl的动态高性能批量图片显示系统，包括：
71.目标获取模块，被配置为用于响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，其中至少一个所述目标节点关联有至少一个目标图片；
72.检索信息获取模块，被配置为用于基于至少一个所述目标节点对应地获取到检索信息集，所述检索信息集包括：检索值，且所述检索值包括：用于检索所述目标图片的图片数据的检索值，和/或，用于检索所述目标图片的标准缓存图片的检索值；
73.图片获取模块，被配置为用于基于所述检索信息集获取到与至少一个所述目标图片相对应的至少一个所述标准缓存图片；
74.显示获取模块，被配置为用于将至少一个所述标准缓存图片传送至图形处理器，并基于所述标准缓存图片显示至少一个所述目标图片；
75.其中，图片获取模块包括：
76.图片数据获取单元，被配置为用于基于至少一个所述检索值向网络发送第一请求，以获取到与所述目标图片相关的至少一份图片数据；
77.图片数据获取单元，被配置为用于提供包括至少一个预设的绘制位的画布层，且
所述绘制位具有标准属性，所述标准属性包括：绘制位位置，和/或绘制空间大小；
78.图片绘制获取单元，被配置为用于基于预设的标准格式将相对应的所述图片数据绘制在所述绘制位上，其中，所述标准格式包括：所述目标图片的标准区域和/或标准尺寸，且所述标准格式与所述标准属性相适应；
79.图片缓存获取单元，被配置为用于对所述绘制位中的绘制信息进行读取以生成具有标准格式的所述标准缓存图片，且所述标准缓存图片还关联有所述检索值。
80.本发明第三方面在于，还提供了一种计算机程序产品，包括计算机指令，所述计算机指令被处理器执行时实现如上述实施例中任一所述方法的步骤。
81.有益技术效果：
82.在关联图数据可视化场景中，当用户对其中节点执行缩放、平移等操作时，海量图片数据库将会根据用户的操作，进行局部性的动态批量显示。本发明针对这一局部性的动态批量显示场景，提供了一种高性能的图片渲染方法。首先，本发明将格式各异的批量目标图片重新绘制为具有标准格式的标准缓存图片，并基于标准缓存图片实现图片的渲染与显示。标准缓存图片便于批量图片的管理、传输以及存储，从而有利于渲染过程中逻辑运算效率的提升。具体地，标准化格式一方面利于管理和传输；另一方面，通过为各个标准缓存图片设置/记录对应的检索值(优选为url)，能够在webgl端渲染时快速地检索调用到相应的标准缓存图片。此外，将格式各异的批量图片进行标准化的处理，有利于在可视化场景的节点中进行统一的视觉显示。
83.并且，为了满足标准化的绘制需求，本发明还对绘制逻辑进行优化。具体地，通过提供多个具有标准属性的绘制位对目标图片的绘制提供绘制空间，以实现对批量的标准化绘制线程的集中处理。
84.为了进一步地保证批量绘制线程的有序执行，本发明一方面还可以对目标图片的当前状态进行监测以及管理，避免目标图片绘制的遗漏或者重复。本发明另一方面还可以提供画布管理器，从而对有限的画布空间资源的进行统一分配、协调，从而实现对批量绘制线程的集中式管理，以保证批量绘制线程可以分别在多个绘制位上正常运行。
附图说明
85.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍。在所有附图中，类似的元件或部分一般由类似的附图标记标识。附图中，各元件或部分并不一定按照实际的比例绘制。显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以在这些附图的基础上作出各种替换或改造，这些替换或改造都属于本发明的保护范围。
86.图1为本发明一示例性实施例中的图片显示方法流程示意图；
87.图2为本发明一示例性实施例中生成标准缓存图片的流程示意图；
88.图3为本发明一具体实施例中图片显示方法的流程示意图；
89.图4为本发明一具体实施例中缓存数据的管理方法流程示意图；
90.图5为本发明一示例性实施例中的图片显示系统的模块结构示意图。
具体实施方式
91.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
92.本文中，使用用于表示元件的诸如“模块”、“部件”或“单元”的后缀仅为了有利于本发明的说明，其本身没有特定的意义。因此，“模块”、“部件”或“单元”可以混合地使用。
93.本文中，术语“上”、“下”、“内”、“外”“前”、“后”、“一端”、“另一端”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性。
94.本文中，除非另有明确的规定和限定，术语“安装”、“设置有”、“连接”等，应做广义理解，例如“连接”，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
95.本文中“和/或”包括任何和所有一个或多个列出的相关项的组合。
96.本文中“多个”意指两个或两个以上，即其包含两个、三个、四个、五个等。
97.需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
98.如在本说明书中使用的，术语“大约”，典型地表示为所述值的+/-5％，更典型的是所述值的+/-4％，更典型的是所述值的+/-3％，更典型的是所述值的+/-2％，甚至更典型的是所述值的+/-1％，甚至更典型的是所述值的+/-0.5％。
99.在本说明书中，某些实施方式可能以一种处于某个范围的格式公开。应该理解，这种“处于某个范围”的描述仅仅是为了方便和简洁，且不应该被解释为对所公开范围的僵化限制。因此，范围的描述应该被认为是已经具体地公开了所有可能的子范围以及在此范围内的独立数字值。例如，范围的描述应该被看作已经具体地公开了子范围如从1到3，从1到4，从1到5，从2到4，从2到6，从3到6等，以及此范围内的单独数字，例如1，2，3，4，5和6。无论该范围的广度如何，均适用以上规则。
100.名词释义：
101.本文中，“webgl”是一项用来在网页上绘制和渲染复杂二维、三维图形(3d图形)，并允许用户与之进行交互的技术。
102.本文中，统一资源定位符(uniform resource locator，url)，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的url，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
103.本文中，“网络”是由节点和节点之间的关系连线构成，表示诸多对象及其相互联系。在计算机领域中，网络是信息传输、接收、共享的虚拟平台，通过它把各个点、面、体的信息联系到一起。其中网络中的节点可以为一个或多个服务器，服务器是指管理和传输信息的一种计算机系统。例如，服务器是网络环境下能为网络用户提供集中计算、信息发表及数据管理等服务的专用计算机。根据不同的计算能力，服务器又分为工作组级服务器、部门级服务器和企业级服务器。特别地本文中的网络还可以指代一个或多个服务器。
104.实施例一
105.本发明第一方面在于，提供了一种基于webgl的动态高性能批量图片显示方法，参见图1和图2，所述方法包括：
106.s10响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，其中至少一个所述目标节点关联有至少一个目标图片；
107.s20基于至少一个所述目标节点对应地获取到检索信息集，所述检索信息集包括：检索值，且所述检索值包括：用于检索所述目标图片的图片数据的检索值，和/或，用于检索所述目标图片的标准缓存图片的检索值；
108.s30基于所述检索信息集获取到与至少一个所述目标图片相对应的至少一个所述标准缓存图片；
109.s40将至少一个所述标准缓存图片传送至图形处理器，并基于所述标准缓存图片显示至少一个所述目标图片；
110.其中，当所述检索信息集包括：用于检索所述目标图片的图片数据的检索值时，s30中包括：
111.s31基于至少一个所述检索值向网络发送第一请求，以获取到与所述目标图片相关的至少一份图片数据；
112.s32提供包括至少一个预设的绘制位的画布层，且所述绘制位具有标准属性，所述标准属性包括：绘制位位置，和/或绘制空间大小；
113.s33基于预设的标准格式将相对应的所述图片数据绘制在所述绘制位上，其中，所述标准格式包括：所述目标图片的标准区域和/或标准尺寸，且所述标准格式与所述标准属性相适应；
114.s34对所述绘制位中的绘制信息进行读取以生成具有标准格式的所述标准缓存图片，且所述标准缓存图片还关联有所述检索值。
115.可以理解的是，本实施例中方法流程的执行顺序仅为一种示例性说明，在实际的执行过程中方法流程的执行顺序也可以作出适应性调整。
116.在一些实施例中，关联图数据可视化场景中的节点可以与网络中的一个或多个服务器相关联，从而可以通过节点获取到对应服务器中的数据(如图片等)，并进行可视化显示。
117.在一些实施例中，画布层为canvas。
118.在一些实施例中，s32包括步骤：
119.提供所述画布层以及用于访问所述画布层的画布功能有限访问点，并基于预设的标准属性在所述画布层上设定至少一个绘制位。对应地，s33中的图片数据经过所述有限访问点进入到对应的所述绘制位处。
120.本实施例中，针对关联图数据可视化场景的动态变化/显示过程，优选地仅设置有单个访问点，每次需要进行图片绘制时，用户仅能通过单个访问点来调用画布功能(即调用画布层)，从而避免过多地调用多个画布层，造成资源分配的浪费。
121.其中，单个访问点的设置使得画布层成为了一个共享画布层(相当于单例模式)，因此，本实施例中可以在共享画布层中对图片进行集中式统一绘制，一方面可以避免画布层的重建、销毁过程对资源进行无效占用，另一方面共享画布层也便于多绘制线程的集中统一的管理。
122.当然，在另一些实施例中，有限访问点的个数也可以设置为两个或多个。如当当前场景中的单位时间内需要绘制的图片内容超过预设的绘制量时，则也可以对应提供两个访问点以启用两个画布层。
123.在一些实施例中，在s31之前还包括：
124.针对至少一个所述目标图片的当前状态建立相应的状态信息，并将所述状态信息与所述检索值相关联，其中，所述状态信息包括：待处理，和/或处理中；
125.基于所述检索值检测所述目标图片的状态信息；
126.当所述状态信息为待处理时，则基于所述检索值执行s31，并将对应的所述状态信息更新为处理中。
127.例如，在一些实施例中，当向服务器发送第一请求(第一请求包括检索值)以下载图片数据时，同时为所述目标图形建立一个状态信息。其中，所述状态信息还可以进一步地被标记为处理中。为了避免重复绘制目标图形，每当发送相应的第一请求之前，都将检测目标图形是否建立了状态信息，如果检测到已经存在对应状态信息，则中止当前的执行步骤，并跳转到下一个目标图形的显示流程。
128.又例如，在一些实施例中，在确定目标图形的对象之后，则为目标图形建立相应的状态信息，并将其初步标记为待处理。随后，依次检索被标记为待处理的目标图形，基于所述目标图形的检索值生成并发送第一请求到服务器，并同时将状态信息更新为处理中。然后，完成图片数据的下载之后，经过有限访问点发送图片绘制请求(也即第二请求)到画布层，其中图片绘制请求包括绘制所需的图片数据。进一步地，当目标图形所对应的标准缓存图片被传输至图形处理器后，将相应所述状态信息更新为完成。
129.进一步地，在一些实施例中，还包括步骤：
130.当检测到目标图形处于处理中的时长超过预设的第一时间(例如，0.5s或1s)，则判断所述目标图形的处理状态异常；并中止所述目标图形当前的处理过程(如下载、绘制以及数据传输等过程)，开启新的绘制线程(例如，调回到步骤31)对目标图形进行显示。
131.例如，在一具体实施例中，当目标图形a的状态信息被标记为处理中的时长超过第一时间时，则中止目标图形a的绘制线程(如s30中的各个步骤)，并对目标图形a的绘制线程中的数据进行清空(例如，对处于下载中的图片数据进行清除，或者，对绘制位中处于绘制中的数据进行清除)。同时开启新的绘制线程，使用代理重新下载，如果代理下载失败，引用默认404错误图片数据，标记对应的url图片信息为不可用。否则绘制对应代理请求的图片数据。
132.本实施例中可以对目标图形的绘制线程进行实时监测，以及时地管理与协调下载或绘制过程中的异常/故障情况，从而保证批量图片在动态刷新过程中的快速显示。
133.在一些操作环境中，尤其是当用户对关联图数据可视化场景进行放缩、平移或旋转等操作时，目标图片在常见中显示位置或可显示数量将会在短时间内快速变化，相应地计算机也会动态地发起不同的绘制请求(也即第二请求)。为了应对这种从海量图片中生成的高频次的绘制请求。本实施例中还进一步地提供了画布管理器，用于协调管理画布层的有限资源以应对这种高频的批量请求。
134.例如，在一些实施例中，提供用于管理所述绘制位的工作状态的画布管理器，其中，工作状态包括：空闲、占用；所述画布管理器可以执行以下步骤：
135.当所述画布管理器检测到当前获取到新的图片数据(如检测到当前下载完成了一份新的图片数据，或者，检测或接收到新的第二请求时)时；
136.检索所述工作状态为空闲的所述绘制位；
137.并将相应的图片绘制请求(即第二请求)发送至对应的所述绘制位，其中所述图片绘制请求包括：被设置为标准格式的所述图片数据，并将所述绘制位的所述工作状态更新为占用；
138.当所述画布管理器检测到占用的所述绘制位上的绘制信息已被读取时，则清除所述绘制位中的绘制信息，并将所述工作状态更新为空闲。
139.本实施例中，画布管理器可以基于对共享画布层中的空间资源进行动态的协调与分配管理，实现批量的绘制线程就集中式的处理，从而保证共享画布层可以应用于处理动态、批量的绘制线程。
140.当然，在另一些实施例中，本发明也可以采用多个共享画布层以协助多实现并发线程绘制。例如，在每个画布层中仅设定一个具有标准属性的绘制位，且每个画布层均被设定为共享模式(相当于单例模式)，从而保证画布层可以被连续地使用。每当在一个画布层上完成绘制以及数据读取后，则可以对该画布层上的数据进行清除，随后该画布层又可以被调用到下一个新的绘制线程中。本实施例中，对于具有单绘制位的多个画布层也可采用画布管理器进行管理，且对多个画布层的管理方式可以类似地参见对多个绘制位的管理。
141.在一些实施例中，s10包括：
142.响应于用户的操作从所述关联图数据可视化场景中获取至少一个节点的显示参数，且当所述显示参数符合预设的显示条件时，将所述节点识别为目标节点；其中，所述显示参数包括：所述节点的显示坐标，和/或所述节点的放大值。
143.在一些实施例中，所述检索值还关联有显示优先级，相应的s10还包括步骤：基于所述显示参数确定所述目标节点的显示优先级；
144.相应的s30中基于所述显示优先级的顺序对所述图片数据和/或所述标准缓存图片进行检索。
145.例如，在一些实施例中，用户的操作包括：旋转、缩放、平移等一个或多个使得关联图数据可视化场景发生动态变化的操作模式。在用户的操作过程中，关联图数据中的各个节点的显示状态也将随之发生变化，本实施例中将基于显示坐标与节点的放大值确定哪些为目标节点(也即是需要显示图片的节点)。
146.其中，目标节点的判断/选取方式以及显示优先级的判断方式可以基于用户结合实际操作环境进行显示。
147.例如，在一些具体实施例中，当应用于超宽屏关联图数据显示场景(尤其是大屏幕
投影时)时，将位于屏幕中央位置区域的节点的显示优先级设置为第i优先级，两侧区域的节点设置为第ii优先级。同时，还可以在同一显示区域中基于节点的单位时间放大值对显示优先级进行设定，如将放大值大于或等于预设放大值(可以工作人员自行设定)的节点设置为第i1优先级，将放大值小于预设放大值的节点设置为第i2优先级。
148.又例如，当应用于普通的个人计算机界面时，优选地基于节点的单位时间放大值确定显示优先级，如放大值越大，则显示优先级越靠前。
149.例如，在一些具体实施例中，为了综合协调图片显示效率与可视化效果(或者说，操作的流畅度)等双重因素，优选地对显示优先级靠前的200个目标节点进行显示。
150.进一步地，在一些实施例中，检索信息集还可以基于上述显示优先级被对应地划分为多个子集，且子集关联有对应的显示优先级。由此在相应的步骤中可以基于子集的显示优先级依次实现图片渲染与显示。例如，可以以一个子集为单位一次性发送多个第一请求到网络服务器中，从而对一个子集所对应的多个目标节点的图形的下载绘制线程进行并行处理。
151.本实施例中可以基于显示优先级对批量目标图片的绘线程进行规划排序。尤其是在目标图片数量较多而绘制资源有限的情况下，可优先调用绘制资源来处理用户重点关注的区域(也即优先显示优先级靠前的目标图片)，从而避免或减少图片刷新等待时间过长对用户体验带来的不利影响。
152.在一些实施例中，在执行步骤s31之前，包括：
153.提供预先获取的缓存集，所述缓存集包括：标准缓存图片，所述标准缓存图片与所述关联图数据可视化场景中的至少一个节点相关联；
154.基于所述检索值以及所述缓存集对所述检索信息集进行分类；
155.其中，当存在至少一个所述检索值可在所述缓存集中检索到相对应的所述标准缓存图片时，则基于所检索到的所述标准缓存图片获取到第一图片缓存集，并基于所述第一图片缓存集进入步骤s40；
156.当存在至少一个所述检索值在所述缓存集中无法检索到相对应的所述标准缓存图片时，则基于相对应的检索值进入步骤s31。
157.为了进一步地提高图片显示效率，满足关联图数据可视化场景中图片的动态刷新，本实施例中还提供了预先获取的缓存集以在一定程度上减少网络请求频次(也即第一请求的频次)、网络请求下载过程以及图片绘制频次。其中，缓存集中可以包括：历史操作过程中生成的标准缓存图片等数据，或者，还可以包括：由工作人员自行预存的标准缓存图片等数据。
158.在一些实施例中，当存在至少一个所述检索值在所述缓存集中无法检索到相对应的所述标准缓存图片时，还包括步骤：
159.测所述缓存集所处的缓存空间中的剩余空间大小，并判断所述剩余空间是否可以存储步骤s33中生成的所述标准缓存图片；
160.若判断结果为是，则将所述标准缓存图片存入所述剩余空间，其中所述标准缓存图片还关联有时间戳以及缓存位置；
161.若判断结果为否，则对应地触发空间清理或空间扩容。
162.在一些实施例中，时间戳为标准缓存图片的实际显示/刷新时间。
163.在一些实施例中，缓存集被设置在浏览器中，由此可以在一定程度上减小网络请求以及数据下载量。
164.在一些实施例，浏览器中的存储空间包括常用空间与备用空间。当存储空间接收到用于缓存图片的第三请求时，优先调用常用空间以实现数据缓存，其中，第三请求包括待缓存的标准缓存图片，以及相应的时间戳。当常用空间无法缓存时，则启用一个或多个备用空间(即执行空间扩容)，直至完成数据缓存任务。如果常用空间与备用空间均无法满足当前的缓存需求时，则对存储空间中的标准缓存图片进行部分或全部清除/清理处理(即执行空间清理)，其中清除顺序可以由时间戳确定。当缓存结束后，记录下当前的缓存位置，且缓存位置可以记录在url中。
165.在一些实施例中，所述标准缓存图片还关联有调用次数，且每当从缓存集中读取一次标准缓存图片，则调用次数加一。本实施例中，可以基于标准缓存图片的调用次数和时间戳共同判断其清除顺序。
166.本实施例中对缓存集以及缓存空间实施了动态管理，既保证了标准缓存图片的时效性，同时合理地规划了有限的缓存空间。
167.例如，在一些具体实施例中，使用可自管理的缓存来管理图片buffer数据(也即缓存集中的标准缓存图片)，如图4所示，具体如下流程：
168.假设初始缓存大小为n(100张图片空间)，当前缓存空间(相当于常用空间)为c(c＝n＝100)，最大值为m(1000张图片空间)，最大值也即浏览器的存储的最大限制。
[0169]ⅰ新增加图片buffer缓存。当图片url对应有缓存存在，则复用缓存ⅲ；当图片url对应的缓存不存在的时候，则需要添加图片buffer缓存。如果有剩余缓存空间，则使用url存入图片buffer到缓存空间，并且使用当前时间作为最近使用时间(即记录时间戳)；如果当前图片缓存剩余空间为0，且总缓存空间(即当前实际使用的缓存空间大小)小于1000，则缓存总空间(即当前可以调用的缓存空间)自增长100，并且添加图片buffer到缓存，并使用当前时间为最近使用时间；如果剩余空间为0,且总缓存空间大于等于最大缓存空间(即最大值)，则触发清理图片缓存ii，然后再存入图片buffer，并使用当前时间为最近使用时间。
[0170]
ii清理图片缓存，当触发清理缓存的时候，则按最近使用时间排序，清理100张最早使用(以最近使用时间为标准)的图片，当总空间超过500时，则清理2分钟未使用的缓存，或者依次按100整数倍逐步释放和缩小总缓存空间至500。
[0171]ⅲ复用缓存，并直接更新最近使用时间。
[0172]
在一些实施例中，所述标准尺寸(宽高)包括：标准宽(width)和标准高(height)；相应地s33包括：
[0173]
基于所述图片数据判断所述目标图片的实际宽高比与所述标准尺寸的标准宽高比是否相同，其中，所述标准宽高比为标准宽/标准高；
[0174]
若判断结果为否，则执行步骤：
[0175]
基于所述标准宽高比确定所述目标图片的提取区域，其中所述提取区域包括：提取大小和/或提取位置，所述提取区域为所述目标图片的标准区域；
[0176]
提取所述提取区域所对应的所述图片数据以作为绘制数据；
[0177]
将所述绘制数据等比绘制在所述绘制位上。
[0178]
在一些实施例中，提取区域中的提取大小或提取位置均可以由工作人员进行预先
设定。
[0179]
可以理解的是，当目标图片的实际宽高比与标准宽高比相同时，可以直接将目标图片的所有图片数据视为绘制数据。
[0180]
在一些实施例中，所述提取大小包括：提取宽度以及提取高度。
[0181]
在一些实施例中，当所述目标图片的实际宽高比大于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域包括步骤：
[0182]
以所述目标图片的高为提取高度，并基于所述提取高度和所述标准宽高比确定所述提取宽度(例如，按照所述标准宽高比乘以目标图片的高，确定提取宽度)；
[0183]
沿所述目标图片的宽度方向确定所述提取位置；
[0184]
基于所述提取大小和所述提取位置确定所述提取区域。
[0185]
在一些实施例中，当所述目标图片的实际宽高比小于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域包括步骤：
[0186]
以所述目标图片的宽为提取宽度，并基于所述提取宽度和所述标准宽高比确定所述提取高度(例如，将所述提取宽度除以所述标准宽高比，计算得到提取区域的高)；
[0187]
沿所述目标图片的高度方向确定所述提取位置；
[0188]
基于所述提取大小和所述提取位置确定所述提取区域。
[0189]
在一些实施例中，当所述目标图片的实际宽高比等于所述标准宽高比时，所述目标图片的整体图片数据即为所述绘制数据。
[0190]
具体地，在一些实施例中，目标图片的实际宽为w1，实际高为h1，标准尺寸的标准宽为w，标准高为h。当w1/h1》w/h时，也即目标图片比较宽时，需要沿w1的方向进行居中剪切。最终截取的图片新宽度(也即提取区域的宽)为wx＝w/h*h1，提取区域的两侧与目标图片的两侧在宽度方向上的偏移为woffset＝(w1
–
wx)/2。或者，当w1/h1《w/h时，即目标图片比较高时，需要沿h1所在方向对目标图形进行居中剪切，截取图片新高度(也即提取区域的高)为hx＝w1/(w/h),提取区域的上下两侧与目标图片的上下两侧在宽度方向上的偏移为hoffset＝(h1-hx)/2。或者，当w1/h1＝w/h时，不需要做裁剪。
[0191]
下面以目标图片b为例，对上述技术方案进行进一步地解释说明：目标图片b的实际尺寸为：1024像素*2048像素，实际宽高比为1：2；预设的标准尺寸为200*200像素，即标准宽高比为1：1。可以判断出实际宽高比小于标准宽高比。基于以上信息确定提取区域的提取宽度和提取高度(也被简称为“宽”、“高”)、提取位置的过程如下：
[0192]
以目标图片b的宽1024像素为基准，将提取区域的宽确定为1024像素；提取区域的高则等于提取区域的宽1024乘以标准比例1，即1024*1＝1024像素。随后，将目标图片b的高(2048像数)减去提取区域的高(1024像素)，再除以2，即(2048-1024)/2＝512像素，由此确定提取位置分别与目标图片的上下两侧间隔512像素(换句话说，本实施例相当于沿目标图片的高度方向对目标图片进行了居中裁剪)，基于提取大小以及提取位置确定最终的提取区域，将提取区域所对应的图片数据提取出来，从而对应地获取到了实际所需的绘制数据。最后将绘制数据压缩绘制在绘制位上。
[0193]
或者，在另一些实施例中，当所述目标图片的实际宽高比大于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域包括步骤：
[0194]
以所述目标图片的宽为提取宽度，并基于所述提取宽度和所述标准宽高比确定所述提取高度；
[0195]
基于所述提取大小和所述目标图片的实际尺寸确定所述提取位置；
[0196]
基于所述提取大小和所述提取位置确定所述提取区域。
[0197]
在一些实施例中，当所述目标图片的实际宽高比小于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域包括步骤：
[0198]
以所述目标图片的高为提取高度，并基于所述提取高度和所述标准宽高比确定所述提取宽度；
[0199]
基于所述提取大小和所述目标图片的实际尺寸确定所述提取位置；
[0200]
基于所述提取大小和所述提取位置确定所述提取区域。
[0201]
下面以目标图片c为例，对上述技术方案进行进一步地解释说明：目标图片c的实际尺寸为50像素*25像素，实际宽高比为2：1；预设的标准尺寸为200*200像素，标准宽高比为1：1。可以判断出实际宽高比大于标准宽高比。随后，以目标图片c的宽为基准，即将提取区域的宽确定为50像素；提取区域的高为提取区域的宽50乘以标准比例1，即50*1＝50像素。随后，以提取区域的高(50像素)减去目标图片的高(25像素)，再除以2，即(50-25)/2＝12.5像素，由此，可以沿目标图片高度所在方向分别上下填充12.5像素高的空白区域。最终的提取位置包括：目标图片的实际位置，以及空白填充位置。最后，基于提取大小和提取位置，对应获取得到绘制数据。此过程相当于对原目标图片的图像数据沿高度方向进行空白填充(具体地，空白处使用默认透明设置)，随后基于原图像数据和空白填充部分获取到绘制数据。再将绘制数据等比放大绘制到相应的绘制位。
[0202]
其中，目标图片的提取区域也即所述目标图片的标准区域，换句话说，提取区域为可视化场景中实际上需要显示的图片内容。并且，当目标图片的实际宽高比和标准宽高比相同时，可以直接将目标图片的图片数据视为绘制数据。
[0203]
可以理解的是，在关联图数据可视化场景中，目标图片的显示主要被作为一种辅助查看手段，也即其主要目的为在一定程度上以可视化的方式为用户呈现实时数据，以辅助分析、处理数据的过程。因此，在可视化场景中，即使最终实际显示的图形内容(对应于标准缓存图片的内容)与实际目标图片不完全一致，如存在图片切割、填充或缩放等情况，也不会对用户或数据分析过程造成较大干扰。比如，当目标图形为头像信息时，对头像信息的切割或填充处理实际上并不会影响用户的操作判断，也不会干扰可视化场景背后的数据分析过程。而本发明实施例中的显示方法可以适应于这一类需要快速批量显示图片，但对图片显示的准确度相对有限的场景。
[0204]
在本发明实施例中，标准缓存图片为基于对目标图片进行标准化的数据(如jpg等格式的数据)提取，并对所提取的数据进行单独绘制所生成的新的图片，且标准缓存图片可以为rgba二维数组的形式。
[0205]
在一些实施例中，所述检索值为统一资源定位符，即url。
[0206]
在一些实施例中，所述目标图片的显示尺寸与所述标准尺寸的比值在大约0.5-2之间，其中，所述显示尺寸为所述目标图片在关联图数据可视化场景可以被缩小或放大的尺寸。例如，在一些具体实施例中，显示尺寸的宽度与标准尺寸的宽度之比为0.5。
[0207]
例如，在一些实施例中，标准尺寸可以基于当前的可视化场景中预设的显示尺寸
进行适应性地设置，从而在一定程度上保证目标图片的显示清晰度。
[0208]
在一些实施例中，所述图片数据的格式包括以下一种或多种：jpg、jpeg、png、bmp、gif、svg、webp。
[0209]
本实施例中，关联图数据可视化场景可以为交互式三维数据可视化平台，其中，关联图数据的可视化效果(即显示内容或显示状态)与用户的实时操作相关。基于此类平台可以利用三维空间可视化与分析数据。在可视化与分析过程中，用户可以通过旋转、放缩、拉伸、平移等操作对可视化效果进行调整；或者，用户还可以通过改变/调整数据的分析逻辑(例如，更改节点数据的提取、合并等计算条件)对可视化效果进行调整；又或者，用户还可以通过改变/调整显示类型(例如，将显示节点的属性信息修改为仅显示节点的关系信息)等操作对可视化效果进行调整，从而以可视化的方式实现数据在三维空间上的可视化与分析。其中，交互式三维数据可视化平台可以为graphxr。
[0210]
本实施例中所涉及的关联图数据可视化技术(在本文中，也被简称为关联图技术)可以广泛应用于各个领域的数据分析处理，例如，生命科学、公共安全、商业智能、知识图谱、智能制造、风险评估等。
[0211]
并且，需要注意的是，以上所述的关联图数据可视化场景与网页显示环境具有显著的区别特点。例如，在常见的网页显示环境中，当用户在滚动浏览网页时，单位时间内所涉及的显示图片量一般相对有限，因为此时用户往往会比较关注图片本身的信息，图片显示过多反而不利于用户的浏览目的。这种情况下，短时间内调用绘制线程次数相对有限，因此现有技术也能够在一定程度上应对网页环境的图片显示需求。而在关联图数据可视化场景中，目标图片往往是批量动态显示，因此，在动态显示过程中往往需要频繁地调用或结束绘制线程，由此将带来大量的性能消耗，所以在运行过程中很容易出现卡顿等故障。
[0212]
为了更清楚地说明本发明所采用技术方案，下面将主要以社交媒体网络数据分析为例对本发明实施例中的示例性方法进行说明：
[0213]
本实施例中所选用的社交媒体网络数据可以为任意一个或多个社交媒体平台的账号信息，且每一个账号信息可以与一个或多个节点(账号或发文信息等)相关联。其中，账号信息可以包括该账号在社交媒体平台上的所有活动数据，如账号id、头像信息、账号简介信息以及账号的发文信息等等。
[0214]
当用户(即数据分析技术人员)希望就查看某一特定人群的头像(即目标图片)时。参考图1至图3所示，具体执行流程如下：
[0215]
1、查找头像的url所对应的缓存buffer数据(也即标准缓存图片；
[0216]
如果未找到，则跳到第2步，如果找到，则读取buffer数据，并跳到第3步
[0217]
2、向网络发送第一请求以下载到图片数据，并使用canvas进行绘制，具体流程如下：
[0218]
2.1检测url对应的状态信息，如果存在状态信息，则跳过(保证不重复请求url图片)，等待下次render loop(渲染循环)；
[0219]
如果不存在状态信息，则标记当前url的状态信息为处理中，并进入2.2；
[0220]
2.2向网络发送第一请求下载url对应的图片数据(该步骤可以并行处理，以减小网络请求的耗时)；
[0221]
2.3获取url图片数据之后，查找canvas(包括绘制位1、绘制位2、绘制位3、绘制位4
等多个绘制位)中的空闲绘制位，如绘制位3。
[0222]
2.4将图片数据压缩(或者放大)并绘制在绘制位3上面，完成200*200等比例压缩(或者放大)；
[0223]
2.5读取绘制位3对应的绘制信息，并缓存；
[0224]
2.6清除绘制位3中的绘制信息，并标记为空闲；
[0225]
2.7开始下一个图片url的处理，跳回到第1步；
[0226]
其中，步骤2.4可以基于目标图片的显示优先级依次执行。
[0227]
3、把buffer数据更新到shadermaterial，并且传送至gpu。
[0228]
本实施例中优选采用计算机的内存(memory)的存储空间，从而满足动态刷新场景下的图片缓存数据的快速存储与读取。在此基础上，运用上述绘制、调用图片的逻辑将目标图片配合缩放到标准尺寸，所得到数据规整且便于管理，既能够快速传输(如读取)。同时结合图片的规整特性选用url的检索方式，有效地提高了图片显示过程中的处理效率，进而在一定程度上避免了chrome等浏览器耗费过高内存而crash，也避免了因为数据量过大而导致频繁卡顿问题。
[0229]
在一些实施例中，为了提高目标图形的清晰度，可以在渲染过程中，对标准缓存图片进行smooth处理(具体地，采用平滑的数字插入函数来处理)。
[0230]
在一些实施例中，图片数据的格式为jpg、jpeg、gif、png、bmp、svg、webp等等，最终的标准缓存图片就是由rgba(红，绿，蓝，透明)组成的二维数组(buffer)。
[0231]
可以理解的是，本实施例中，由于将批量的格式各异的目标图片均处理为具有标准格式的标准缓存图片，相应的随后处理所得到的二维数组等数据也较为规整由此，在后续渲染过程中，也可以快速地通过二维数组的行坐标检索并调用到对应的数据信息，以完成目标图片的渲染与显示。
[0232]
例如，在一些实施例中，二维数组的格式表达是平面图像数据，相当于一张满屏幕的图像，其中，x为屏幕的宽，y为屏幕的高，则二维数组中的任意数据可以采用bufferarray[x][y]的形式表示。因此，二维数据中bufferarray[0][0]到bufferarray[200][200]所对应的正方形区域正好为一张图片信息(也即标准缓存图片)，bufferarray[201][0]到bufferarray[400][200]所对应的另一个正方形区域是则对应于另外一张图片信息。
[0233]
另外，需要说明的是，本发明实施例中的“标准缓存图片”，与现有技术(即cn107239287b的中国发明专利)中“图标图片”并不相同。首先，本发明实施例中的“标准缓存图片”为基于目标图片重新绘制得到的具有标准格式的新图片，最后webgl端可以直接利用标准缓存图片实现节点图片显示。并且，本发明实施例中“标准缓存图片”的设置是为了满足集中式绘制条件下，多绘制线程的协调与管理(换句话说，本发明中“标准化”是为协调格式各异的目标图片之间的差异性)。而在上述现有技术中，“图标图片”的设置主要为了满足网页中的显示条件(具体地，网页显示过程中，由于网页中的icon的大小是固定的，图片尺寸过大后则无法显示完全)。
[0234]
实施例二
[0235]
参见图5所示，本发明还提供了一种基于webgl的动态高性能批量图片显示系统，包括：
[0236]
目标获取模块10，被配置为用于响应于用户的操作从关联图数据可视化场景中获
取到至少一个目标节点，其中至少一个所述目标节点关联有至少一个目标图片；
[0237]
检索信息获取模块20，被配置为用于基于至少一个所述目标节点对应地获取到检索信息集，所述检索信息集包括：用于检索所述目标图片的图片数据和/或标准缓存图片的检索值；
[0238]
图片获取模块30，被配置为用于基于至少一个所述检索信息集获取到与至少一个所述目标图片相对应的至少一个所述标准缓存图片；
[0239]
显示获取模块40，被配置为用于将至少一个所述标准缓存图片传送至图形处理器，并基于所述标准缓存图片显示至少一个所述目标图片；
[0240]
其中，图片获取模块30包括：
[0241]
图片数据获取单元，被配置为用于基于至少一个所述检索值向网络发送第一请求，以获取到与所述目标图片相关的至少一份图片数据；
[0242]
图片数据获取单元，被配置为用于提供包括至少一个预设的绘制位的画布层，且所述绘制位具有标准属性，所述标准属性包括：绘制位位置，和/或绘制空间大小；
[0243]
图片绘制获取单元，被配置为用于基于预设的标准格式将相对应的所述图片数据绘制在所述绘制位上，其中，所述标准格式包括：所述目标图片的标准区域和/或标准尺寸，且所述标准格式与所述标准属性相适应；
[0244]
图片缓存获取单元，被配置为用于对所述绘制位中的绘制信息进行读取以生成具有标准格式的所述标准缓存图片，且所述标准缓存图片还关联有所述检索值。
[0245]
在一些实施例中，图片数据获取单元被进一步地配置为用于提供所述画布层以及用于访问所述画布层的画布功能有限访问点，并基于预设的标准属性在所述画布层上设定至少一个所述绘制位；
[0246]
对应地，s33中的所述图片数据经过所述有限访问点进入到对应的所述绘制位处。
[0247]
在一些实施例中，目标获取模块还被进一步地配置为响应于用户的操作从所述关联图数据可视化场景中获取至少一个节点的显示参数，且当所述显示参数符合预设的显示条件时，将所述节点识别为目标节点；其中，所述显示参数包括：所述节点的显示坐标，和/或所述节点的放大值。
[0248]
在一些实施例中，所述检索值为统一资源定位符。
[0249]
在一些实施例中，所述标准缓存图片为由rgba组成的二维数组。
[0250]
在一些实施例中，图片数据获取单元还被配置为用于针对至少一个所述目标图片的当前状态建立相应的状态信息，并将所述状态信息与所述检索值相关联，其中，所述状态信息包括：待处理，和/或处理中；
[0251]
基于所述检索值检测所述目标图片的状态信息；
[0252]
当所述状态信息为待处理时，则基于对应的所述检索值执行s31，并将对应的所述状态信息更新为处理中；
[0253]
在一些实施例中，所述系统还包括：画布管理器，用于管理所述绘制位的工作状态；其中，当所述画布管理器检测到当前获取到新的图片数据时；检索所述工作状态为空闲的所述绘制位；并将相应的图片绘制请求发送至对应的所述绘制位，其中所述图片绘制请求包括：被设置为标准格式的所述图片数据，并将所述绘制位的所述工作状态更新为占用；当所述画布管理器检测到所述绘制位上的绘制信息已被读取时，则清除所述绘制位中的绘
制信息，并将所述工作状态更新为空闲。
[0254]
在一些实施例中，所述检索值还关联有显示优先级，相应的目标获取模块还被配置为用于基于所述显示参数确定所述目标节点的显示优先级；相应的，图片获取模块还被配置以用于基于所述显示优先级的顺序对所述图片数据和/或所述标准缓存图片进行检索。
[0255]
在一些实施例中，图片获取模块还包括：缓存单元，所述缓存单元被配置为用于提供预先获取的缓存集，所述缓存集包括：标准缓存图片，且所述标准缓存图片与所述关联图数据可视化场景中的至少一个节点相关联；基于所述检索值以及所述缓存集对所述检索信息集进行分类；
[0256]
其中，当存在至少一个所述检索值可在所述缓存集中检索到相对应的所述标准缓存图片时，则基于所检索到的所述标准缓存图片获取到第一图片缓存集，并将所述第一图片缓存集发送至显示获取模块；
[0257]
当存在至少一个所述检索值在所述缓存集中无法检索到相对应的所述标准缓存图片时，则将相对应的所述检索值发送至图片数据获取单元。
[0258]
在一些实施例中，所述标准尺寸包括：标准宽以及标准高，相应地，图片获取模块30被进一步地配置为用于基于所述图片数据判断所述目标图片的实际宽高比与所述标准尺寸的标准宽高比是否相同，其中，所述标准宽高比为标准宽/标准高；
[0259]
若判断结果为否，则图片获取模块执行步骤：
[0260]
基于所述标准宽高比确定所述目标图片的提取区域，其中所述提取区域包括：提取大小和/或提取位置，所述提取区域为所述目标图片的标准区域；
[0261]
提取所述提取区域所对应的所述图片数据以作为绘制数据；
[0262]
将所述绘制数据等比绘制在所述绘制位上；
[0263]
在一些实施例中，所述目标图片的显示尺寸与所述标准尺寸的比值在大约0.5-2之间，其中，所述显示尺寸为所述目标图片在所述关联图数据可视化场景中可以被缩小或放大的尺寸。
[0264]
在一些实施例中，所述图片数据的格式包括以下一种或多种：jpg、jpeg、gif、png、bmp、svg、webp。
[0265]
在一些实施例中，缓存单元还被配置为用于当存在至少一个所述检索值在所述缓存集中无法检索到相对应的所述标准缓存图片时，执行以下步骤：
[0266]
检测所述缓存集所处的缓存空间中的剩余空间大小，并判断所述剩余空间是否可以存储步骤s33中生成的所述标准缓存图片；
[0267]
若判断结果为是，则将所述标准缓存图片存入所述剩余空间，其中所述标准缓存图片还关联有时间戳以及缓存位置；
[0268]
若判断结果为否，则对应地触发空间清理或空间扩容。
[0269]
在一些实施例中，所述提取大小包括：提取宽度以及提取高度，其中，当所述目标图片的实际宽高比大于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域的步骤包括：
[0270]
以所述目标图片的高为提取高度，并基于所述提取高度和所述标准宽高比确定所述提取宽度；
[0271]
沿所述目标图片的宽度方向确定所述提取位置；
[0272]
基于所述提取大小和所述提取位置确定所述提取区域。
[0273]
在一些实施例中，当所述目标图片的实际宽高比小于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域的步骤包括：
[0274]
以所述目标图片的宽为提取宽度，并基于所述提取宽度和所述标准宽高比确定所述提取高度；
[0275]
沿所述目标图片的高度方向确定所述提取位置；
[0276]
基于所述提取大小和所述提取位置确定所述提取区域。
[0277]
在一些实施例中，当所述目标图片的实际宽高比等于所述标准宽高比时，所述目标图片的整体图片数据即为所述绘制数据。
[0278]
在一些实施例中，所述提取大小包括：提取宽度以及提取高度，其中，当所述目标图片的实际宽高比大于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域的步骤包括：
[0279]
以所述目标图片的宽为提取宽度，并基于所述提取宽度和所述标准宽高比确定所述提取高度；
[0280]
基于所述提取大小和所述目标图片的实际尺寸确定所述提取位置；
[0281]
基于所述提取大小和所述提取位置确定所述提取区域。
[0282]
在一些实施例中，当所述目标图片的实际宽高比小于所述标准宽高比时，基于所述标准宽高比确定所述目标图片的提取区域的步骤包括：
[0283]
以所述目标图片的高为提取高度，并基于所述提取高度和所述标准宽高比确定所述提取宽度；
[0284]
基于所述提取大小和所述目标图片的实际尺寸确定所述提取位置；
[0285]
基于所述提取大小和所述提取位置确定所述提取区域。
[0286]
可以理解的是，本发明实施例中的系统可以对应实现实施例一中的任一方法步骤，此处不再赘述。
[0287]
实施例三
[0288]
基于上述实施例一，本发明还对应地提供了一种计算机程序产品，包括计算机指令，所述计算机指令被处理器执行时实现如实施例一中任一所述方法的步骤。例如，s10响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，其中至少一个所述目标节点关联有至少一个目标图片；s20基于至少一个所述目标节点对应地获取到检索信息集，所述检索信息集包括：检索值，且所述检索值包括：用于检索所述目标图片的图片数据的检索值，和/或，用于检索所述目标图片的标准缓存图片的检索值；s30基于所述检索信息集获取到与至少一个所述目标图片相对应的至少一个所述标准缓存图片；s40将至少一个所述标准缓存图片传送至图形处理器，并基于所述标准缓存图片显示至少一个所述目标图片；
[0289]
其中，s30中包括：
[0290]
s31基于至少一个所述检索值向网络发送第一请求，以获取到与所述目标图片相关的至少一份图片数据；
[0291]
s32提供包括至少一个预设的绘制位的画布层，且所述绘制位具有标准属性，所述
标准属性包括：绘制位位置，和/或绘制空间大小；s33基于预设的标准格式将相对应的所述图片数据绘制在所述绘制位上，其中，所述标准格式包括：所述目标图片的标准区域和/或标准尺寸，且所述标准格式与所述标准属性相适应；s34对所述绘制位中的绘制信息进行读取以生成具有标准格式的所述标准缓存图片，且所述标准缓存图片还关联有所述检索值。
[0292]
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
[0293]
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台计算机终端(可以是手机，计算机，服务器，平板电脑，vr设备，ar设备，mr设备或者网络设备等)执行本发明各个实施例所述的方法。
[0294]
上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，这些均属于本发明的保护之内。