CN111475589A - 图像数据的渲染方法及装置 - Google Patents

Abstract

本发明公开了一种图像数据的渲染方法及装置，涉及电子地图技术领域，主要目的在于对无需渲染的图像数据不再执行渲染操作，提升图像数据整体的渲染效率。主要技术方案包括：从服务器接收与需要加载的图像数据相关的状态信息；基于所述状态信息，确定所述图像数据是否为空数据；若为空数据，则确定所述图像数据无需被渲染。本发明主要用于渲染图像数据。

Description

图像数据的渲染方法及装置

技术领域

本发明涉及电子地图技术领域，特别是涉及一种图像数据的渲染方法及装置。

背景技术

在地图编辑过程中经常需要以图片的方式展示采集轨迹点、轨迹线、轨迹箭头等众多资料。为了方便图片的展示和复用，采用标准的地图切片方式加载，该种地图切片加载方式就是将一幅地图切成很多大小一致的小块tile图片，加载时只将需要的部分发送。该种方式，每个图层单独渲染方便控制叠加和显示。

在执行上述tile图片的加载过程中，存在大量的透明tile图片。而渲染这些透明图片会降低浏览器的性能，使得渲染效率不高。

发明内容

有鉴于此，本发明提供的一种图像数据的渲染方法及装置，主要目的在于对无需渲染的图像数据不再执行渲染操作，提升图像数据整体的渲染效率。

为了解决上述问题，本发明主要提供如下技术方案：

第一方面，本发明提供了一种图像数据的渲染方法，包括：

从服务器接收与需要加载的图像数据相关的状态信息；

基于所述状态信息，确定所述图像数据是否为空数据；

若为空数据，则确定所述图像数据无需被渲染。

第二方面，本发明还提供一种图像数据的渲染装置，包括：

接收单元，用于从服务器接收与需要加载的图像数据相关的状态信息；

确定单元，用于基于所述接收单元得到的状态信息，确定所述图像数据是否为空数据；

渲染单元，用于若确定单元确定图像数据为空数据，则确定所述图像数据无需被渲染。

第三方面，本发明还提供一种服务器，包括至少一处理器，一存储介质，所述存储介质用于存储所述处理器执行的程序，以及所述处理器执行所述程序过程中所需的数据；

其中，所述程序被处理器执行时实现如上所述图像数据的渲染方法的步骤。

本发明提供的图像数据的渲染方法及装置，是在对需要加载的图像数据进行渲染之前，先根据其相关的状态信息判断哪些图像数据是空数据，而无需被渲染，以此减少需要渲染操作的图像数据的数据量，提高对图像数据的整体渲染效率。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明实施例提供的一种图像数据的渲染方法流程图；

图2示出了本发明实施例提供的一种应用于电子地图中的图像数据的渲染方法流程图；

图3示出了本发明实施例提供的另一种图像数据的渲染方法流程图；

图4示出了本发明实施例提供的一种图像数据的渲染装置的组成框图；

图5示出了本发明实施例提供的另一种图像数据的渲染装置的组成框图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

本发明实施例提供的一种图像数据的渲染方法，具体如图1所示，包括：

11、从服务器接收与需要加载的图像数据相关的状态信息。

12、基于状态信息，确定图像数据是否为空数据。

13、若为空数据，则确定图像数据无需被渲染。

本实施例中，图像数据相关的状态信息是服务器针对图像数据是否需要渲染操作而获取的状态信息。图像数据的渲染端通过该状态信息可以判断图像数据是否为空数据，空数据在图像处理过程中被定义为无需渲染的数据，比如，对于图片中的一个图层，当渲染端向服务器请求该图层的图像数据时，服务器将返回该图层的状态信息，渲染端根据该状态信息确定该图层为空数据时，则可以直接加载该图层，而无需对该图层进行渲染操作。

可见，本发明实施例主要应用于图像数据的展示，在展示前判断图像数据是否需要执行渲染操作，以减少对无需渲染的图像数据进行渲染操作。本发明实施例在对大量的图像数据进行渲染处理的场景中，能够大量过滤无需渲染的图像数据，从而减少对图像数据渲染的工作量，缩减了渲染的处理时间。

在电子地图领域中，需要对大量图像数据(地图图片)进行渲染展示，并且，地图编辑过程中经常需要以图片的方式展示采集轨迹点、轨迹线、轨迹箭头等众多资料，为了方便图片的展示和复用，采用标准的地图切片方式加载。采用标准的地图切片方式进行加载时，会形成很多的tile图片，而这些tile图片在加载过程中，存在大量的透明图片(图像数据为空数据)。由于透明图片不绘制也不会影响用户体验，因此当需要加载渲染的图片为透明图片时可以选择不渲染，从而减少绘制次数，实现地图渲染的加速。

为实现上述目的，本发明实施例提供了一种图像数据的渲染方法，该方法为电子地图图片渲染端的方法，也即为渲染端显示图片的方法。如图2所示，该方法包括：

21、向服务器发送加载图片的请求信息。

本发明实施例中，在向服务器发送加载图片的请求信息时，可以包含要求加载图片的空间位置信息，该空间位置信息可以根据地图中心的位置和所要加载的内容确定，将对应的地址发送给服务器，也可以将所要加载图片信息发送给服务器，由服务器获取对应的图片。

22、接收服务发送的加载图片对应的状态信息，所述状态信息中包含表示加载图片为透明图片的标识信息。

服务器在接收到步骤21的请求信息之后，服务器根据请求的信息获取对应图片的状态信息，并生成对应的图片。并将图片的状态信息反馈给请求端。

该处需要说明的是，本发明实施例需要对透明图片进行标记，用于告知图片渲染端请求的图片为透明图片，对该类图片中的图像数据不用渲染。本发明实施例在对透明图片进行标记时，可以通过网页服务器响应状态码的形式实现，也可以通过在图片二进制码中添加特殊字段的形式实现，也可以通过除上述方法以外的其他方法实现，具体的本发明实施例对此不进行限制。只要能够对透明图片进行标记，图片渲染端能够识别即可。当通过网页服务器响应状态码的形式实现时，需要提前定义表示透明图片的状态码号，以便图片渲染端在接收到状态信息之后进行识别。

23、确定需要加载的图片是否为透明图片；若为透明图片，则执行24；若为非透明图片，则执行25。

24、确定需要加载的图片无需渲染。

25、渲染非透明图片。

本发明实施例中，向服务器发送加载图片的请求信息后，返回的响应信息中包含加载图片是否为透明图片的标识信息，若为透明图片，则无需加载渲染，与现有技术中对所有的透明图片均渲染相比，在很大程度上减少了图片渲染端的工作量，降低了浏览器的加载渲染的工作量，提高了图片加载渲染的效率，进而提高了浏览器的性能。

以下发明实施将具体阐述图像数据是否为空数据的确定方式，基于该方式来阐述图像数据的渲染方法，具体如图3所示，包括：

31、从服务器接收与需要加载的图像数据相关的状态信息。

32、分析状态信息的内容；若状态信息中仅包括网页服务器响应状态码，则执行33；若状态信息中仅包括加载图片对应的图片二进制码，则执行34；若状态信息中包括网页服务器响应状态码和加载图片对应的图片二进制码，则执行33。

在本实施例中，可以根据状态信息中的不同内容来确定图像数据是否为空数据，即判断图像数据是空数据的方式是多样的，比如，可以根据网页服务器响应状态码判断，也可以根据加载图片对应的图片二进制码判断。具体采用何种方式判断，需要根据状态信息中的具体内容所确定，而状态信息中的内容可以是根据设置的格式获取的，也可以是采集与图像数据相关的所有信息构成的全量数据。渲染端通过分析状态信息中的内容，选择不同的方式判断该图像数据是否为空数据。

33、根据所述网页服务器响应状态码确定图像数据是否为空数据。若为空数据，则执行35；若为非空数据，则执行36。

其中，在根据所述网页服务器响应状态码确定图像数据是否为空数据时，可以采用但不局限于以下的方法，该方法包括：

分析所述网页服务器响应状态码，确定所述响应状态码是否为预设值；若是，则确定图像数据是否为空数据。在实际应用中，可以使用HTTP状态码做为网页服务器响应状态码，其中，在HTTP状态码中204具体表示：服务器成功处理了请求，但不需要返回任何实体内容，因此，可以使用HTTP状态204做为预设值，当服务器返回的HTTP状态码为204，则确定所请求的图像数据为空数据，对于图片而言，可以视为无需渲染的透明图片，反之，若HTTP状态码为其他数值，则说明所加载的图像数据需要渲染操作。

34、根据所述图片二进制码确定图像数据是否为空数据。若为空数据，则执行35；若为非空数据，则执行36。

其中，当采用图片二进制码对图像数据进行标识时，可以设置表示图像数据为空数据的特殊二进制码字段，并将该二进制码的特殊字段添加在图片二进制码中，以便渲染端进行识别。该特殊字段在添加时，可以添加在图片二进制码的任意位置，具体的本发明实施例对此不进行限制。基于二进制码的识别从前到后执行的逻辑，本发明实施例优选添加在图片二进制码的开头位置。一旦识别该特殊字段之后，将不再进行后续二进制码的识别。

本发明实施例中，在接收到状态信息之后，根据所述图片二进制码确定图像数据为空数据可以采用但不局限于以下方法，该方法包括：确定所述图片二进制码中是否包含特殊字段；所述特殊字段为图片服务器在确定加图像数据为空数据时，在所述图片二进制码中添加的字段；若包含特殊字段，则确定该图像数据为空数据。

35、确定图像数据无需被渲染。

36、根据状态信息获取图像数据，并利用预设的绘图协议渲染图像数据。

在获取图像数据时，可以采用但不局限于以下的方法实现，该方法包括：判断图像数据是否需要跨域加载，若需要，利用服务器中预设的允许跨域加载的协议头信息，跨域加载所述图像数据。

其中，本发明实施例中请求的图像数据，其存储位置可能为与渲染端设备所在域处于不同域的图像数据存储设备，即图像数据可能为相同域的图像数据，也可能为不同域的图像数据；若为相同域的图像数据，服务器在接收到请求后能够在本域内直接获取该图片的相关信息并返回渲染端即可，若为不同域的图像数据，为了实现图像的加载及渲染，需要跨域加载该图像数据，在处理时，可以采用但不局限于以下的方法实现，该方法为：

在服务器端预设允许跨域加载的协议头信息，当服务器端确定渲染段所请求的图像数据需要跨域加载时，可以利用该协议头信息生成跨域加载该图像数据的请求，以获取该图像数据；或者是通过代理服务器从跨域服务器获取对应的图像数据，将该跨域的图像数据变更为域内的图像数据，并反馈给请求的渲染端。

此外，在利用预设的绘图协议渲染图像数据时，可以但不局限于使用canvas或WebGL渲染该图像数据。其中，canvas是在新的HTML标准HTML5中用于在网页上绘制图形的元素标签；WebGL是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

本发明实施例中，在向服务器发送加载图像数据的请求信息后，从服务器返回的响应信息中包含该图像数据的状态信息，根据该状态信息确定图像数据为空数据时，无需对该图像数据进行渲染，以此减少需要渲染操作的图像数据的数据量，提高对图像数据的整体渲染效率。

并且本发明实施例中，可以使用网页服务器响应状态码标识请求的图像数据为空数据，也可以使用在图像数据对应的图片二进制码中标记特殊字段的方式标识请求的图像数据为空数据。为判断图像数据是否为空数据提供了多样的实现方式。

更进一步的，本发明实施例，对于获取的图像数据为跨域数据时，通过跨域协议头的添加或者代理服务器的协助，使得渲染端能够成功的加载并渲染该跨域图像数据，特别是在电子地图的应用中，使得地图图片加载渲染的操作性提高，进而提高了用户体验。

基于上述方法实施例，本发明实施例还提供一种图像数据的渲染装置，如图4所示，该装置包括：

接收单元41，用于从服务器接收与需要加载的图像数据相关的状态信息；

确定单元42，用于基于所述接收单元41得到的状态信息，确定所述图像数据是否为空数据；

渲染单元43，用于若确定单元42确定图像数据为空数据，则确定所述图像数据无需被渲染。

进一步的，如图5所示，所述确定单元42包括：

分析模块421，用于分析所述状态信息的内容；

第一确定模块422，用于若所述状态信息中仅包括网页服务器响应状态码，则根据所述网页服务器响应状态码确定图像数据是否为空数据；

第二确定模块423，用于若所述状态信息中仅包括图像数据对应的图片二进制码，根据所述图片二进制码确定图像数据是否为空数据；

第三确定模块424，用于若所述状态信息中包括网页服务器响应状态码和图像数据对应的图片二进制码，则根据所述网页服务器响应状态码确定图像数据是否为空数据。

进一步的，所述第一确定模块422具体用于，确定所述网页服务器响应状态码是否为预设值；若为预设值，则确定所述图像数据为空数据。

进一步的，所述第二确定模块423具体用于，确定所述图片二进制码中是否包含特殊字段；所述特殊字段为所述服务器在确定图像数据为空数据时，在所述图片二进制码中添加的字段；若包含特殊字段，则确定图像数据为空数据。

进一步的，如图5所示，所述装置还包括：

获取单元44，用于若确定单元42确定图像数据不为空数据，则根据所述状态信息获取图像数据；

所述渲染单元43还用于，利用预设的绘图协议渲染所述获取单元44得到的图像数据。

进一步的，如图5所示，所述获取单元44包括：

判断模块441，用于判断所述图像数据是否需要跨域加载；

获取模块442，用于若判断模块441确定需要跨域加载，利用所述服务器中预设的允许跨域加载的协议头信息，跨域加载所述图像数据。

进一步的，所述渲染单元43使用canvas或WebGL渲染所述图像数据。

该处需要说明的是，本发明实施例中的各功能模块以及功能单元的具体描述，可以参考方法实施例中的相关描述，本发明实施例此处将不再赘述。

第三方面，本发明还提供一种服务器，包括至少一处理器，一存储介质，所述存储介质用于存储所述处理器执行的程序，以及所述处理器执行所述程序过程中所需的数据；

其中，所述程序被处理器执行时实现如上所述图像数据的渲染方法的步骤。

本发明实施例中，在向服务器发送加载图像数据的请求信息后，从服务器返回的响应信息中包含该图像数据的状态信息，根据该状态信息确定图像数据为空数据时，无需对该图像数据进行渲染，以此减少需要渲染操作的图像数据的数据量，提高对图像数据的整体渲染效率。

并且本发明实施例中，可以使用网页服务器响应状态码标识请求的图像数据为空数据，也可以使用在图像数据对应的图片二进制码中标记特殊字段的方式标识请求的图像数据为空数据。为判断图像数据是否为空数据提供了多样的实现方式。

更进一步的，本发明实施例，对于获取的图像数据为跨域数据时，通过跨域协议头的添加或者代理服务器的协助，使得渲染端能够成功的加载并渲染该跨域图像数据，特别是在电子地图的应用中，使得地图图片加载渲染的操作性提高，进而提高了用户体验。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (15)

1.一种图像数据的渲染方法，其特征在于，包括：

从服务器接收与需要加载的图像数据相关的状态信息；

基于所述状态信息，确定所述图像数据是否为空数据；

若为空数据，则确定所述图像数据无需被渲染。

2.根据权利要求1所述的方法，其特征在于，基于所述状态信息，确定所述图像数据是否为空数据，包括：

分析所述状态信息的内容；

若所述状态信息中仅包括网页服务器响应状态码，则根据所述网页服务器响应状态码确定图像数据是否为空数据；

若所述状态信息中仅包括图像数据对应的图片二进制码，根据所述图片二进制码确定图像数据是否为空数据；

若所述状态信息中包括网页服务器响应状态码和图像数据对应的图片二进制码，则根据所述网页服务器响应状态码确定图像数据是否为空数据。

3.根据权利要求2所述的方法，其特征在于，根据所述网页服务器响应状态码确定图像数据是否为空数据，包括：

确定所述网页服务器响应状态码是否为预设值；

若为预设值，则确定所述图像数据为空数据。

4.根据权利要求2所述的方法，其特征在于，根据所述图片二进制码确定图像数据是否为空数据，包括：

确定所述图片二进制码中是否包含特殊字段；所述特殊字段为所述服务器在确定图像数据为空数据时，在所述图片二进制码中添加的字段；

若包含特殊字段，则确定图像数据为空数据。

5.根据权利要求1-4中任一项所述的方法，其特征在于，所述方法还包括：

若图像数据不为空数据，则根据所述状态信息获取图像数据；

利用预设的绘图协议渲染所述图像数据。

6.根据权利要求5所述的方法，其特征在于，根据所述状态信息获取图像数据，包括：

判断所述图像数据是否需要跨域加载；

若需要，利用所述服务器中预设的允许跨域加载的协议头信息，跨域加载所述图像数据。

7.根据权利要求5所述的方法，其特征在于，利用预设的绘图协议渲染所述图像数据包括：

使用canvas或WebGL渲染所述图像数据。

8.一种图像数据的渲染装置，其特征在于，包括：

接收单元，用于从服务器接收与需要加载的图像数据相关的状态信息；

确定单元，用于基于所述接收单元得到的状态信息，确定所述图像数据是否为空数据；

渲染单元，用于若确定单元确定图像数据为空数据，则确定所述图像数据无需被渲染。

9.根据权利要求8所述的装置，其特征在于，所述确定单元包括：

分析模块，用于分析所述状态信息的内容；

第一确定模块，用于若所述状态信息中仅包括网页服务器响应状态码，则根据所述网页服务器响应状态码确定图像数据是否为空数据；

第二确定模块，用于若所述状态信息中仅包括图像数据对应的图片二进制码，根据所述图片二进制码确定图像数据是否为空数据；

第三确定模块，用于若所述状态信息中包括网页服务器响应状态码和图像数据对应的图片二进制码，则根据所述网页服务器响应状态码确定图像数据是否为空数据。

10.根据权利要求9所述的装置，其特征在于，所述第一确定模块具体用于，确定所述网页服务器响应状态码是否为预设值；若为预设值，则确定所述图像数据为空数据。

11.根据权利要求9所述的装置，其特征在于，所述第二确定模块具体用于，确定所述图片二进制码中是否包含特殊字段；所述特殊字段为所述服务器在确定图像数据为空数据时，在所述图片二进制码中添加的字段；若包含特殊字段，则确定图像数据为空数据。

12.根据权利要求8-11中任一项所述的装置，其特征在于，所述装置还包括：

获取单元，用于若确定单元确定图像数据不为空数据，则根据所述状态信息获取图像数据；

所述渲染单元还用于，利用预设的绘图协议渲染所述获取单元得到的图像数据。

13.根据权利要求12所述的装置，其特征在于，所述获取单元包括：

判断模块，用于判断所述图像数据是否需要跨域加载；

获取模块，用于若判断模块确定需要跨域加载，利用所述服务器中预设的允许跨域加载的协议头信息，跨域加载所述图像数据。

14.根据权利要求12所述的装置，其特征在于，所述渲染单元使用canvas或WebGL渲染所述图像数据。

15.一种服务器，其特征在于，包括至少一处理器，一存储介质，所述存储介质用于存储所述处理器执行的程序，以及所述处理器执行所述程序过程中所需的数据；

其中，所述程序被处理器执行时实现权利要求1-7中任一项所述图像数据的渲染方法的步骤。

Images