CN109740087A - 一种图片渲染方法、装置及系统 - Google Patents

Abstract

本发明实施例涉及计算机技术领域，公开了一种图片渲染方法、装置及系统，该方法包括：接收客户端发送的图片渲染请求；根据图片渲染请求，从预建立的数据库中调用待渲染的图片，待渲染的图片用以对页面进行渲染；检测当前的网速信息；若当前的网速低于预设网速阈值时，按照预设规则选取待渲染图片中至少一张图片进行分割，并设置分割后的每一个子图片对应的图片标识；将待渲染图片进行转换，以二进制码流的形式体现；将二进制码流和与图片标识共同传输至客户端，以便客户端将二进制码流转换为待渲染图片后，按照图片标识对子图片进行重组，并在客户端页面进行渲染展示。通过该种方式，避免页面中图片过多造成页面卡顿，部分图片加载失败的情况。

Description

一种图片渲染方法、装置及系统

技术领域

本发明实施例涉及计算机技术领域，具体涉及一种图片渲染方法、装置及系统。

背景技术

随着计算机技术的迅速发展，图片渲染技术也日益成熟。图片渲染是程序可视化图片生成的一个重要过程。在游戏、购物网站等具有图片渲染需求的应用程序中应用广泛。网页上的图片渲染的速率跟网速有很大关系。网速慢，则图片渲染速率慢。尤其当网页上的图片本身占用内存过大时，图片渲染速率更加缓慢。这给很多用户带来了烦恼，大大降低了用户体验度。

那么，如何才能减少页面渲染时间，即使在网速不佳的情况下，仍然可以尽量保证页面图片的渲染速度，成为亟待解决的技术问题。

发明内容

为此，本发明实施例提供一种图片渲染传输方法、装置及系统，以解决现有技术中由于网络不佳而导致的页面中图片渲染速率慢的问题。

为了实现上述目的，本发明的实施方式提供如下技术方案：

在本发明的实施方式的第一方面中，提供了一种图片渲染方法，该方法对应于一种图片渲染系统，系统包括服务器和客户端，方法由服务器执行，方法包括：

接收客户端发送的图片渲染请求；

根据图片渲染请求，从预建立的数据库中调用待渲染的图片，待渲染的图片用以对页面进行渲染；

检测当前的网速信息；

若当前的网速低于预设网速阈值时，按照预设规则选取待渲染图片中至少一张图片进行分割，并设置分割后的每一个子图片对应的图片标识；

将待渲染图片进行转换，以二进制码流的形式体现，子图片对应的二进制码流和图片标识进行绑定；

将二进制码流和与图片标识共同传输至客户端，以便客户端将二进制码流转换为待渲染图片后，按照图片标识对子图片进行重组，并在客户端页面进行渲染展示

在本发明的一个实施例中，当前的网速低于预设网速阈值时，按照预设规则选取待渲染图片中至少一张图片进行分割，并确定分割后的每一个子图片对应的图片标识，具体包括：

当确定待渲染图片中第一待渲染图片占用内存大于或者等于预设内存阈值时，将第一待渲染图片放入图像形容器canvas中；

按照预设比例对第一待渲染图片进行等比分割；

并为等比分割后的每一个子图片设置对应的图片标识，其中第一待渲染图片为待渲染图片中的任一张图片。

在本发明的另一实施例中，将待渲染图片进行转换，以二进制码流的形式体现，具体包括：

利用base64将待渲染图片进行转换，以二进制码流的形式体现。

在本发明的实施方式的第二方面中，提供了一种图片渲染装置，包括：接收单元，用于接收图片渲染请求；

调用单元，用于从预建立的数据库中调用待渲染的图片，待渲染的图片用以对页面进行渲染；

检测单元，用于检测当前的网速信息；

处理单元，用于若当前的网速低于预设网速阈值时，按照预设规则选取待渲染图片中至少一张图片进行分割，并设置分割后的每一个子图片对应的图片标识；

将待渲染图片进行转换，以二进制码流的形式体现，子图片对应的二进制码流和图片标识进行绑定；

发送单元，用于将二进制码流和与图片标识共同传输至客户端，以便客户端将二进制码流转换为待渲染图片后，按照图片标识对子图片进行重组，并在客户端页面进行渲染展示。

在本发明的一个实施例中，处理单元具体用于，当确定待渲染图片中第一待渲染图片占用内存大于或者等于预设内存阈值时，将第一待渲染图片放入图像形容器canvas中；

按照预设比例对第一待渲染图片进行等比分割；

并为等比分割后的每一个子图片设置对应的图片标识，其中第一待渲染图片为待渲染图片中的任一张图片。

在本发明的另一实施例中，处理单元具体用于，利用base64将待渲染图片进行转换，以二进制码流的形式体现。

在本发明的实施方式的第三方面中，提供了一种图片渲染系统，该系统包括：服务器和客户端；

客户端用于，向服务器发送图片渲染请求；

服务器用于，根据图片渲染请求，从预建立的数据库中调用待渲染的图片，待渲染的图片用以对页面进行渲染；

检测当前的网速信息；

若当前的网速低于预设网速阈值时，按照预设规则选取待渲染图片中至少一张图片进行分割，并设置分割后的每一个子图片对应的图片标识；

将待渲染图片进行转换，以二进制码流的形式体现，子图片对应的二进制码流和图片标识进行绑定；

将二进制码流和与图片标识共同传输至客户端；

客户端还用于，将二进制码流转换为待渲染图片后，按照图片标识对子图片进行重组，并在客户端页面进行渲染展示。

在本发明的实施方式的第四方面中，提供了一种计算机存储介质，计算机存储介质中包含一个或多个程序指令，一个或多个程序指令用于被一种图片渲染系统执行如第一方面的一种图片渲染方法中任一方法步骤。

根据本发明的实施方式，具有如下优点：在接收到客户端发送的图片渲染请求后，根据图片渲染请求确定所需要的待渲染图片。然后检测当前的网速信息，如果存在网络低于预设网速阈值的情况下，则按照预设规则选取待渲染图片中至少一张图片进行切割，然后以二进制码流的形式传输。如此一来，可以提升图片的传输速率，间接提高图片渲染速率。为了保证切割后的图片的正常渲染，因此在图片切割后，为每一个字图片设定相应的图片标识，便于客户端在接收到图片后可以按照图片标识进行重组。另外，图片以二进制码流的形式传输，还可以保证图片传输的安全性。

附图说明

为了更清楚地说明本发明的实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是示例性的，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图引伸获得其它的实施附图。

图1为本发明的一实施例提供的一种图片渲染方法流程示意图；

图2为本发明的另一实施例提供的一种图片渲染装置结构示意图；

图3为本发明的另一实施例提供的一种图片渲染系统架构示意图。

具体实施方式

以下由特定的具体实施例说明本发明的实施方式，熟悉此技术的人士可由本说明书所揭露的内容轻易地了解本发明的其他优点及功效，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例1提供了一种图片渲染方法，该方法对应一种图片渲染系统，该系统包括服务器和客户端，而本方法将由服务器执行，本方法主要应用在网络很低，且图片中具有占用内存较大的图片的场景。如果图片中所有图片占用内存都很小，则可以采用传统方式在页面进行渲染即可，无需使用本发明所介绍的方法，该方法步骤具体如图1所示，包括：

步骤110，接收客户端发送的图片渲染请求。

具体的，用户通过客户端输入页面加载请求。客户端根据页面加载请求确定即将打开的网页所需要待渲染的图片，然后向服务器发送图片渲染请求。当然，期间可能还需要在网页渲染其他内容，比如文字、视频或者引用的其他文件等，这些都是常规的技术。本申请中不做过多介绍，该步骤只是想引出客户端需要向服务器端请求待渲染的图片，便于下文的介绍。

步骤120，根据图片渲染请求，从预建立的数据库中调用待渲染的图片，待渲染的图片用以对页面进行渲染。

步骤130，检测当前的网速信息。

检测当前网速的信息的目的是为了后续确定待渲染图片的传输方式，如果网速足够快，那么按照传统的传输方式即可，在客户端接收到待渲染图片后在本地客户端进行渲染即可。而如果网速很慢的情况下，仍然按照传统方式传输图片至本地客户端，再进行图片渲染将会很慢，大大降低用户的体验度。尤其是当待渲染的图片中存在占用内存较大的图片时，图片传输速率将会更慢，那么客户端下载图片并进行渲染和对页面排版等都将受到影响，也就是大大影响了页面渲染速率。因此，在服务器传输待渲染图片至本地客户端之前，事先检测当前的网速信息。

步骤140，若当前的网速低于预设网速阈值时，按照预设规则选取待渲染图片中至少一张图片进行分割，并设置分割后的每一个子图片对应的图片标识。

步骤150，将待渲染图片进行转换，以二进制码流的形式体现，子图片对应的二进制码流和图片标识进行绑定。

步骤160，将二进制码流和与图片标识共同传输至客户端。

具体的，若当前网速低于预设网速阈值时，则可以按照预设规则选取待渲染图片中至少一张图片进行分割，并设置分割后的每一个字图片对应的图片标识。

可选的，预设规则可以设置将所有的待渲染图片均进行分割，也可以设置将待渲染图片中的占用内存较大的图片进行分割。具体的规则可以根据实际情况设定。例如，如果某些图片占用内存本身就很小，那么就没有必要进行分割。如果是占用内存很大，例如100M，则必然需要进行分割。

其分割过程可以是：

当确定待渲染图片中第一待渲染图片占用内存大于或者等于预设内存阈值时，将第一待渲染图片放入图像形容器canvas中。按照预设比例对第一待渲染图片进行等比分割。在一个具体例子中，可以是将第一待渲染图片分割为36份，即6行6列。为每一个字图片设置对应的图片标识，其中第一待渲染图片为待渲染图片中的任一张图片。

待渲染的图片中某些或者全部图片都被切割完成后，可以使用双层for循环的程序代码来遍历x轴和y轴中分割的图片，然后利用base64将待渲染图片进行转换。并以二进制码流的形式传输到客户端一侧。其目的是为了传输过程中可以加快传输速率，相较于传统图片使用地址形式的加载，二进制码流的形式传输更加快，客户端接收(下载)速率也将加快，从而在客户端体现的页面的渲染速率加快，大大提升用户体验度。而且，以二进制码流的形式传输，而不是以明文的形式体现，编码不会呈现在页面中，间接实现了对图片的保护。子图片设置相应的图片标识，客户端在接收到二进制码流后，会将二进制码流转换为相应的图片，然后提取出子图片后，利用CssRules中的FindRules寻找所有的子图片，根据相应的图片标识，依次进行排列，如果排序没有符合要求，CssRules中的insertRules会进行操作，将分割的图片放到指定的位置，通过上述方式实现对子图片的重组，还原第一待渲染图片。

本发明实施例提供的一种图片渲染方法，在接收到客户端发送的图片渲染请求后，根据图片渲染请求确定所需要的待渲染图片。然后检测当前的网速信息，如果存在网络低于预设网速阈值的情况下，则按照预设规则选取待渲染图片中至少一张图片进行切割，然后以二进制码流的形式传输。如此一来，可以提升图片的传输速率，间接提高图片渲染速率，进而还加快了页面渲染速度。为了保证切割后的图片的正常渲染，因此在图片切割后，为每一个字图片设定相应的图片标识，便于客户端在接收到图片后可以按照图片标识进行重组。另外，图片以二进制码流的形式传输，还可以保证图片传输的安全性。通过该种方式，还可以避免页面中图片过多造成页面卡顿，部分图片加载失败的情况，大大提升了用户的体验度。

与上述实施例1对应的，本发明实施例2还提供了一种图片渲染装置，具体如图2所示，该装置包括：接收单元201、检测单元202、处理单元203以及发送单元204。

接收单元201，用于接收图片渲染请求；

调用单元，用于从预建立的数据库中调用待渲染的图片，待渲染的图片用以对页面进行渲染；

检测单元202，用于检测当前的网速信息；

处理单元203，用于若当前的网速低于预设网速阈值时，按照预设规则选取待渲染图片中至少一张图片进行分割，并设置分割后的每一个子图片对应的图片标识；

将待渲染图片进行转换，以二进制码流的形式体现，子图片对应的二进制码流和图片标识进行绑定；

发送单元204，用于将二进制码流和与图片标识共同传输至客户端，以便客户端将二进制码流转换为待渲染图片后，按照图片标识对子图片进行重组，并在客户端页面进行渲染展示。

可选的，处理单元203具体用于，当确定待渲染图片中第一待渲染图片占用内存大于或者等于预设内存阈值时，将第一待渲染图片放入图像形容器canvas中；

按照预设比例对第一待渲染图片进行等比分割；

并为等比分割后的每一个子图片设置对应的图片标识，其中第一待渲染图片为待渲染图片中的任一张图片。

可选的，处理单元203具体用于，利用base64将待渲染图片进行转换，以二进制码流的形式体现。

本发明实施例提供的一种图片渲染装置中各部件所执行的功能均已在上述实施例1中做了详细介绍，因此这里不做过多赘述。

本发明实施例提供的一种图片渲染装置，在接收到客户端发送的图片渲染请求后，根据图片渲染请求确定所需要的待渲染图片。然后检测当前的网速信息，如果存在网络低于预设网速阈值的情况下，则按照预设规则选取待渲染图片中至少一张图片进行切割，然后以二进制码流的形式传输。如此一来，可以提升图片的传输速率，间接提高图片渲染速率，进而还加快了页面渲染速度。为了保证切割后的图片的正常渲染，因此在图片切割后，为每一个字图片设定相应的图片标识，便于客户端在接收到图片后可以按照图片标识进行重组。另外，图片以二进制码流的形式传输，还可以保证图片传输的安全性。通过该种方式，还可以避免页面中图片过多造成页面卡顿，部分图片加载失败的情况，大大提升了用户的体验度。

与上述实施例相对应的，本发明实施例3还提供了一种图片渲染系统，具体如图3所示，该系统包括：客户端301和服务器302；

客户端301用于，向服务器302发送图片渲染请求；

服务器302用于，执行如上述实施例所介绍的一种图片渲染方法中任一方法步骤。

客户端301还用于，将二进制码流转换为待渲染图片后，按照图片标识对子图片进行重组，并在客户端301页面进行渲染展示。

本发明实施例提供的一种图片渲染系统，在接收到客户端301发送的图片渲染请求后，根据图片渲染请求确定所需要的待渲染图片。然后检测当前的网速信息，如果存在网络低于预设网速阈值的情况下，则按照预设规则选取待渲染图片中至少一张图片进行切割，然后以二进制码流的形式传输。如此一来，可以提升图片的传输速率，间接提高图片渲染速率，进而还加快了页面渲染速度。为了保证切割后的图片的正常渲染，因此在图片切割后，为每一个字图片设定相应的图片标识，便于客户端301在接收到图片后可以按照图片标识进行重组。另外，图片以二进制码流的形式传输，还可以保证图片传输的安全性。通过该种方式，还可以避免页面中图片过多造成页面卡顿，部分图片加载失败的情况，大大提升了用户的体验度。

与上述实施例相对应的，本发明实施例还提供了一种计算机存储介质，该计算机存储介质中包含一个或多个程序指令。其中，一个或多个程序指令用于被一种图片渲染系统执行如上所介绍的一种图片渲染方法。

虽然，上文中已经用一般性说明及具体实施例对本发明作了详尽的描述，但在本发明基础上，可以对之作一些修改或改进，这对本领域技术人员而言是显而易见的。因此，在不偏离本发明精神的基础上所做的这些修改或改进，均属于本发明要求保护的范围。

Claims (8)

1.一种图片渲染方法，其特征在于，所述方法对应于一种图片渲染系统，所述系统包括服务器和客户端，所述方法由服务器执行，所述方法包括：

接收客户端发送的图片渲染请求；

根据所述图片渲染请求，从预建立的数据库中调用待渲染的图片，所述待渲染的图片用以对页面进行渲染；

检测当前的网速信息；

若当前的网速低于预设网速阈值时，按照预设规则选取所述待渲染图片中至少一张图片进行分割，并设置分割后的每一个子图片对应的图片标识；

将所述待渲染图片进行转换，以二进制码流的形式体现，所述子图片对应的二进制码流和所述图片标识进行绑定；

将所述二进制码流和与所述图片标识共同传输至客户端，以便所述客户端将所述二进制码流转换为待渲染图片后，按照所述图片标识对所述子图片进行重组，并在所述客户端页面进行渲染展示。

2.根据权利要求1所述的方法，其特征在于，所述当前的网速低于预设网速阈值时，按照预设规则选取所述待渲染图片中至少一张图片进行分割，并确定分割后的每一个子图片对应的图片标识，具体包括：

当确定所述待渲染图片中第一待渲染图片占用内存大于或者等于预设内存阈值时，将所述第一待渲染图片放入图像形容器canvas中；

按照预设比例对所述第一待渲染图片进行等比分割；

并为等比分割后的每一个子图片设置对应的图片标识，其中所述第一待渲染图片为所述待渲染图片中的任一张图片。

3.根据权利要求1或2所述的方法，其特征在于，所述将所述待渲染图片进行转换，以二进制码流的形式体现，具体包括：

利用base64将所述待渲染图片进行转换，以二进制码流的形式体现。

4.一种图片渲染装置，其特征在于，所述装置包括：

接收单元，用于接收图片渲染请求；

调用单元，用于从预建立的数据库中调用待渲染的图片，所述待渲染的图片用以对页面进行渲染；

检测单元，用于检测当前的网速信息；

处理单元，用于若当前的网速低于预设网速阈值时，按照预设规则选取所述待渲染图片中至少一张图片进行分割，并设置分割后的每一个子图片对应的图片标识；

将所述待渲染图片进行转换，以二进制码流的形式体现，所述子图片对应的二进制码流和所述图片标识进行绑定；

发送单元，用于将所述二进制码流和与所述图片标识共同传输至客户端，以便所述客户端将所述二进制码流转换为待渲染图片后，按照所述图片标识对所述子图片进行重组，并在所述客户端页面进行渲染展示。

5.根据权利要求4所述的装置，其特征在于，所述处理单元具体用于，当确定所述待渲染图片中第一待渲染图片占用内存大于或者等于预设内存阈值时，将所述第一待渲染图片放入图像形容器canvas中；

按照预设比例对所述第一待渲染图片进行等比分割；

并为等比分割后的每一个子图片设置对应的图片标识，其中所述第一待渲染图片为所述待渲染图片中的任一张图片。

6.根据权利要求4或5所述的装置，其特征在于，所述处理单元具体用于，利用base64将所述待渲染图片进行转换，以二进制码流的形式体现。

7.一种图片渲染系统，其特征在于，所述系统包括：服务器和客户端；

所述客户端用于，向所述服务器发送图片渲染请求；

所述服务器用于，根据所述图片渲染请求，从预建立的数据库中调用待渲染的图片，所述待渲染的图片用以对页面进行渲染；

检测当前的网速信息；

若当前的网速低于预设网速阈值时，按照预设规则选取所述待渲染图片中至少一张图片进行分割，并设置分割后的每一个子图片对应的图片标识；

将所述待渲染图片进行转换，以二进制码流的形式体现，所述子图片对应的二进制码流和所述图片标识进行绑定；

将所述二进制码流和与所述图片标识共同传输至客户端；

所述客户端还用于，将所述二进制码流转换为待渲染图片后，按照所述图片标识对所述子图片进行重组，并在所述客户端页面进行渲染展示。

8.一种计算机存储介质，其特征在于，所述计算机存储介质中包含一个或多个程序指令，所述一个或多个程序指令用于被所述一种图片渲染系统执行如权利要求1-3任一项所述的方法。