CN103605534B - 图片加载方法及装置 - Google Patents

Abstract

本发明公开了一种图片加载方法及装置，该方法包括：浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息；浏览器向服务器发送所述请求消息；浏览器接收服务器根据所述请求消息发送的包含所述基础图片对应的压缩纹理数据的压缩格式数据；浏览器将所述压缩格式数据中包含的所述纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制。该方法使浏览器从服务器获取基础图片的压缩纹理数据，并通过GPU发送至Canvas进行绘制，由于基础图片的压缩纹理数据较小，因此上传至GPU时速度较快，在节省了GPU的内存的同时，GPU也能将压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。

Description

图片加载方法及装置

技术领域

本发明涉及互联网领域，特别是涉及图片加载方法及装置。

背景技术

目前很多网页游戏都是使用基于超文本标记语言HTML（Hyper Text Mark-upLanguage）的Canvas绘图工具来进行开发的，在这些游戏中，用一些基础图片如人物、动物、背景图案等，经过Canvas的进一步渲染、重复、填充等绘图操作，形成一帧完整的游戏画面。为了提高游戏玩家的用户体验，浏览器使用OpenGL ES（OpenGL for Embedded Systems）技术来加速Canvas的绘制。OpenGL ES将游戏中用到的基础图片上传至图形处理器GPU(Graphic Processing Unit)后作为纹理（texture），然后Canvas利用该texture进行绘图。

现有的利用OpenGL ES进行Canvas绘制时，每个基础图片都对应一个统一资源定位符url(Uniform Resource Locator)，浏览器根据该url寻找到该图片存储的地址，并将图片数据下载下来，这些图片数据可能是jpg、png、gif、webp等格式，浏览器需要将图片数据解码为bitmap格式数据，并将解码后得到的bitmap格式数据上传到GPU作为一个texture，由GPU将texture绘制到Canvas上，Canvas利用几个基础图片的texture，结合一些后续的绘制动作，完成一帧游戏画面。

随着网页游戏的开发，网页游戏里面的基础图片的像素变大，数量增多，浏览器将图像数据解码为bitmap格式数据时，得到的bitmap格式数据的数据量较大，因此采用GPU加速Canvas绘制时，就会出现将bitmap格式数据上传到GPU的速度慢的问题，从而拖延GPU将bitmap格式数据上传到Canvas的时间，因此会降低Canvas的绘制速度。并且由于GPU的内存空间有限，bitmap格式数据上传到GPU上会占用GPU很多内存空间，导致GPU的运行速度减低，游戏不够流畅。

发明内容

本发明实施例提供了图片加载方法及装置，以解决现有技术中Canvas加载图片时占用的CPU内存大，降低Canvas的绘制速度的问题。

为了解决上述技术问题，本发明实施例公开了如下技术方案：

一方面，本申请提供了一种图片加载方法，包括：浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息；浏览器向服务器发送所述请求消息；浏览器接收服务器根据所述请求消息发送的包含所述基础图片对应的压缩纹理数据的压缩格式数据；浏览器将所述压缩格式数据中包含的所述压缩纹理数据发送至图形处理器GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制。

结合第一方面，在第一方面的第一种可能的实现方式中，所述浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息包括：浏览器判断目标网页是否包含Canvas标签；如果包含，浏览器将所述目标网页的标识及GPU支持的压缩格式发送至服务器，以使服务器根据所述目标网页的标识，查询到所述目标网页上使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；浏览器从服务器下载所述网页的压缩纹理列表，并进行保存，所述压缩纹理列表包括：所述目标网页上的Canvas使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；浏览器指定目标基础图片；浏览器判断所述目标基础图片的标识是否在所述压缩纹理列表中；如果在所述压缩纹理列表中，浏览器生成请求下载所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据。

结合第一方面的第一种可能的实现方式，在第一方面的第二中可能的实现方式中，如果所述目标基础图片的标识不在所述压缩纹理列表中，浏览器向服务器发送所述目标基础图片的标识及所述GPU支持的压缩格式，以使所述服务器根据所述目标基础图片的标识及所述GPU支持的压缩格式，利用图片转换工具生成与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据。

结合第一方面，在第一方面的第三种可能的实现方式中，所述浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息包括：浏览器解析目标网页中的图片是否包含第一预设属性，所述第一预设属性用于标识所述图片为基础图片；如果包含，则浏览器将所述图片识别为目标基础图片，并获得所述目标基础图片的标识；浏览器生成请求下载所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述目标基础图片的标识及所述GPU支持的压缩格式，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据。

结合第一方面，在第一方面的第四种可能的实现方式中，所述浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息包括：浏览器解析目标网页中的图片是否包含第一预设属性，所述第一预设属性用于标识所述图片为基础图片；如果包含，则浏览器将所述图片识别为目标基础图片，并获得所述目标基础图片的标识；浏览器解析所述目标基础图片是否包含第二预设属性，所述第二预设属性用于标识服务器提供的压缩纹理数据对应的压缩格式；浏览器从GPU支持的压缩格式和所述服务器提供的压缩纹理数据对应的压缩格式中选择一个作为目标压缩格式。浏览器生成请求下载所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述目标基础图片的标识及所述目标压缩格式，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据。

结合第一方面，或第一方面的第一种可能的实现方式，或第一方面的第二种可能的实现方式，或第一方面的第三种可能的实现方式，或第一方面的第四种可能的实现方式，在第一方面的第五种可能的实现方式中，浏览器将所述压缩格式数据中包含的所述压缩纹理数据发送至GPU，包括：浏览器使用解压缩工具，对所述压缩格式数据进行解压缩，以解析出所述压缩纹理数据；浏览器将所述压缩纹理数据发送至GPU。

第二方面，本申请提供了一种图片加载方法，包括：服务器接收浏览器发送的请求下载基础图片对应的压缩纹理数据的请求消息；服务器根据所述请求消息，获得包含所述压缩纹理数据的压缩格式数据；服务器将包含所述压缩纹理数据的压缩格式数据发送至浏览器，以使所述浏览器将所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制。

结合第二方面，在第二方面的第一种可能的实现方式中，还包括：服务器预先保存网页的压缩纹理列表，所述网页的压缩纹理列表中包含所述网页的标识、所述网页上的Canvas使用的基础图片的标识、所述基础图片对应的压缩纹理数据的url；服务器接收浏览器发送的目标网页的标识及GPU支持的压缩格式；服务器根据所述目标网页的url和GPU支持的压缩格式，查询所述目标网页的压缩纹理列表，获得所述目标网页上的Canvas使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；服务器将所述目标网页上的Canvas使用的基础图片的标识，和与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识发送至所述浏览器，以使所述浏览器根据指定的目标基础图片向所述服务器发送请求下载所述基础图片对应的压缩纹理数据的请求消息。

结合第二方面，在第二方面的第二种可能的实现方式中，服务器根据所述请求消息，获得包含所述压缩纹理数据的压缩格式数据包括：服务器判断所述请求消息中是否包含所述基础图片的标识和GPU支持的压缩格式；如果包含，服务器判断所述基础图片的标识是否在服务器预先保存的压缩纹理列表中；如果是，服务器根据所述基础图片的标识和GPU支持的压缩格式，查询保存的压缩纹理列表，获得所述压缩纹理数据，所述压缩纹理数据与所述GPU支持的压缩格式一致。

结合第二方面的第二种可能的实现方式，在第二方面的第三种可能的实现方式中，如果服务器判断出所述基础图片的标识不在服务器预先保存的压缩纹理列表中，还包括：服务器根据所述请求消息中包含的所述基础图片的标识，将所述基础图片下载下来；服务器根据所述请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述基础图片转换成与所述GPU支持的压缩格式一致的压缩纹理数据。

结合第二方面，在第二方面的第四种可能的实现方式中，所述服务器根据所述请求消息，获得包含所述压缩纹理数据的压缩格式数据包括：服务器根据所述请求消息中包含的所述基础图片的标识，将所述基础图片下载下来；服务器根据所述请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述基础图片转换成与所述GPU支持的压缩一致的压缩纹理数据。

第三方面，本申请提供了一种图片加载装置，所述装置包括：生成单元，用于生成请求下载基础图片对应的压缩纹理数据的请求消息；第一发送单元，用于向服务器发送所述生成单元生成的请求消息；接收单元，用于接收服务器根据所述请求消息发送的包含所述基础图片对应的压缩纹理数据的压缩格式数据；第二发送单元，用于将所述压缩格式数据中包含的所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制。

结合第三方面，在第三方面的第一种可能的实现方式中，所述生成单元包括：第一判断子单元，用于判断目标网页是否包含Canvas标签；第一发送子单元，用于当所述第一判断子单元判断出所述目标网页包含Canvas标签时，将所述目标网页的标识及GPU支持的压缩格式发送至服务器，以使服务器根据所述目标网页的标识，查询到所述目标网页上使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的标识；下载子单元，用于从服务器下载所述目标网页的压缩纹理列表，并进行保存，所述压缩纹理列表包括：所述目标网页上的Canvas使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；指定子单元，用于指定目标基础图片；第二判断子单元，用于判断所述指定子单元指定的目标基础图片的标识是否在所述压缩纹理列表中；第一生成子单元，用于当所述第二判断子单元判断出所述目标基础图片的标识在所述压缩纹理列表中时，生成请求下载所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据。

结合第三方面的第一种可能的实现方式，在第三方面的第二种可能的实现方式中，所述装置还包括：第二发送单元，用于当所述第二判断子单元判断出所述目标基础图片的标识不在所述压缩纹理列表时，向服务器发送所述目标基础图片的标识及所述GPU支持的压缩格式，以使所述服务器根据所述目标基础图片的标识及所述GPU支持的压缩格式，利用图片转换工具生成与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据。

结合第三方面，在第三方面的第三种可能的实现方式中，所述生成单元包括：第一解析子单元，用于解析目标网页中的图片是否包含第一预设属性，所述第一预设属性用于标识所述图片为基础图片；标识子单元，用于当所述解析子单元解析出所述目标网页中的图片包含所述预设属性时，将所述图片识别为基础图片，并获得所述基础图片的标识；生成子单元，用于生成请求下载所述标识子单元标识的所述基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述基础图片的标识及所述GPU支持的压缩格式，所述请求消息用于向服务器获取所述基础图片的压缩纹理数据。

结合第三方面，在第三方面的第四种可能的实现方式中，所述生成单元包括：第一解析子单元，用于解析目标网页中的图片是否包含第一预设属性，所述第一预设属性用于标识所述图片为基础图片；标识子单元，用于当所述第一解析子单元解析出所述目标网页中的图片包含所述预设属性时，将所述图片识别为目标基础图片，并获得所述目标基础图片的标识；第二解析子单元，用于解析所述目标基础图片是否包含第二预设属性，所述第二预设属性用于标识服务器提供的压缩纹理数据对应的压缩格式；选择子单元，用于从GPU支持的压缩格式和所述服务器提供的压缩纹理数据对应的压缩格式中选择一个作为目标压缩格式。第三生成子单元，用于生成请求下载基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述基础图片的标识及所述目标压缩格式，所述请求消息用于向服务器获取所述基础图片的压缩纹理数据。

结合第三方面，或第三方面的第一种可能的实现方式，或第三方面的第二种可能的实现方式，或第三方面的第三种可能的实现方式，或第三方面的第四种可能的实现方式在第三方面的第五种可能的实现方式中，所述第二发送单元包括：解压缩子单元，用于使用解压缩工具对所述接收单元收到的压缩格式数据进行解压缩，以解析出所述压缩纹理数据；第三发送子单元，用于将所述压缩纹理数据发送至GPU。

第四方面，本申请提供了一种图片加载装置，所述装置包括：第一接收单元，用于接收浏览器发送的请求下载基础图片对应的压缩纹理数据的请求消息；获得单元，用于根据所述第一接收单元接收的所述请求消息，获得包含所述压缩纹理数据的压缩格式数据；第三发送单元，用于将所述获得单元获得的包含所述压缩纹理数据的压缩格式数据发送至浏览器，以使所述浏览器将所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制。

结合第四方面，在第四方面的第一种可能的实现方式中，所述装置还包括：预存单元，用于预先保存网页的压缩纹理列表，所述网页的压缩纹理列表中包含所述网页的标识、所述网页上的Canvas使用的基础图片的标识、所述基础图片对应的压缩纹理数据的地址标识；第二接收单元，用于接收浏览器发送的目标网页的标识及GPU支持的压缩格式；查询单元，用于根据所述第二接收单元接收的所述目标网页的标识和GPU支持的压缩格式，查询所述目标网页的压缩纹理列表，获得所述目标网页上的Canvas使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；第四发送单元，用于将所述查询单元查询到的所述目标网页上的Canvas使用的基础图片的标识，和与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识发送至所述浏览器，以使所述浏览器根据指定的目标基础图片向所述服务器发送请求下载所述基础图片对应的压缩纹理数据的请求消息。

结合第四方面，在第四方面的第二种可能的实现方式中，所述获得单元包括：第三判断子单元，用于判断所述请求消息中是否包含所述基础图片的标识和GPU支持的压缩格式；第四判断子单元，用于当所述第三判断子单元判断出所述请求消息中包含所述基础图片的标识和GPU支持的压缩格式时，判断所述基础图片的标识是否在服务器预先保存的压缩纹理列表中；查询子单元，用于当所述第四判断子单元判断出所述基础图片的标识在服务器预先保存的压缩纹理列表中时，根据所述基础图片的标识和GPU支持的压缩格式，查询保存的压缩纹理列表，以获得所述压缩纹理数据，所述压缩纹理数据与所述GPU支持的压缩格式一致。

结合第四方面的第二种可能的实现方式，在第四方面的第三种可能的实现方式中，所述获得单元还包括：第一下载子单元，用于当所述第四判断子单元判断出所述基础图片的标识不在服务器预先保存的压缩纹理列表中时，根据所述请求消息中包含的所述基础图片的标识，将所述基础图片下载下来；第一转换子单元，用于根据所述请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述下载单元下载的所述基础图片转换成与所述GPU支持的压缩格式一致的压缩纹理数据。

结合第四方面，在第四方面的第四种可能的实现方式中，所述获得单元包括：第二下载子单元，用于根据所述第一接收单元接收的请求消息中包含的所述基础图片的标识，将所述基础图片下载下来；第二转换子单元，用于根据所述第一接收单元接收的请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述下载子单元下载的所述基础图片转换成与所述GPU支持的压缩一致的压缩纹理数据。

由上述实施例可以看出，在确定了基础图片后，浏览器首先向服务器发送请求消息，以请求下载该基础图片对应的压缩纹理数据，并接收服务器根据该请求消息发送的所述基础图片的压缩纹理数据。由于浏览器接收到的该压缩纹理数据与GPU支持的压缩格式一致，并且相对于该基础图片的bitmap格式数据来说，压缩纹理数据的数据量小，所以浏览器将压缩纹理数据上传至GPU时速度较快，在节省了GPU内存的同时，GPU也能将该压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请图片加载方法提供的一个实施例的流程示意图；

图2a为本申请图片加载方法的服务器保存的压缩纹理列表的示意图；

图2b为本申请图片加载方法提供的另一个实施例的流程示意图；

图3为本申请图片加载方法提供的另一个实施例的流程示意图；

图4为本申请图片加载方法提供的另一个实施例的流程示意图；

图5为本申请图片加载方法提供的另一个实施例的流程示意图；

图6为本申请图片加载方法提供的另一个实施例的流程示意图；

图7为本申请图片加载装置提供的一个实施例的结构示意图；

图8为本申请的生成单元的一个结构示意图；

图9为本申请的生成单元的另一个结构示意图；

图10为本申请的第二发送单元的结构示意图；

图11为本申请图片加载装置提供的另一个实施例的结构示意图；

图12为本申请图片加载装置提供的另一个实施例的结构示意图；

图13为本申请的获得单元的结构示意图；

图14为本申请的获得单元的另一个结构示意图；

图15为本申请的获得单元的另一个结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明实施例中的技术方案，并使本发明实施例的上述目的、特征和优点能够更加明显易懂，下面结合附图对本发明实施例中技术方案作进一步详细的说明。

参见图1，为本申请图片加载方法提供的一个实施例的流程示意图，所述方法包括以下步骤：

S101：浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息。

该请求消息中包含该基础图片的标识，及当前终端的GPU支持的压缩纹理格式，浏览器也可以将GPU的型号包含在所述请求消息中，服务器根据所述GPU的型号解析出所述GPU支持的压缩纹理格式。

在浏览器能获知所述基础图片对应的压缩纹理数据的地址标识时，该请求消息也可以只包含所述基础图片的压缩纹理数据的地址标识。

S102：浏览器向服务器发送所述请求消息。

S103：浏览器接收服务器根据所述请求消息发送的包含所述基础图片对应的压缩纹理数据的压缩格式数据。

浏览器接收到的压缩格式数据为将所述压缩纹理数据进行进一步无损压缩后的数据，如将压缩纹理数据经过GZIP、ZIP压缩后的数据，或者浏览器接收到的压缩格式数据即为压缩纹理数据。

S104：浏览器将所述压缩格式数据中包含的所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制。

在本实施例中，该基础图片的标识也可以具体为该基础图片的url或其他的唯一标识，该基础图片的压缩纹理数据的地址标识也可以具体为该基础图片的压缩纹理数据的url，或其他的唯一地址标识。

由上述实施例可以看出，在Canvas对基础图片进行绘制之前，浏览器首先生成请求下载该基础图片对应的压缩纹理数据的请求消息，向服务器发送该请求消息，并接收服务器根据该请求消息发送的所述基础图片的压缩纹理数据。由于浏览器接收到的该压缩纹理数据相对于该基础图片的bitmap格式数据来说，数据量小，所以浏览器将压缩纹理数据上传至GPU时速度较快，在节省了GPU内存的同时，GPU也能将该压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。

参见图2b，为本申请图片加载方法提供的另一个实施例的流程示意图，所述方法包括以下步骤：

S201：浏览器解析网页，判断网页是否包含Canvas标签，如果包含，执行步骤S202。

S202：浏览器向服务器发送请求消息，所述请求消息中包含该网页的url及GPU支持的压缩纹理格式。

浏览器也可以通过将GPU的型号发送给服务器，由服务器通过所述GPU型号解析出GPU支持的压缩纹理格式。

以加载网络游戏的画面为例，该服务器可以由浏览器厂商提供，也可以由开发该游戏的游戏厂商提供，服务器中预存有网页的压缩纹理列表，可以为图2a的形式，该压缩纹理列表包括网页的url、网页上使用的基础图片的url、基础图片的压缩纹理数据的url。为了适应不同型号的终端，服务器可以预存对应各个GPU型号的压缩纹理数据的url。服务器能够根据所述网页的url，查询所述压缩纹理列表，得到所述网页上使用的基础图片的url，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的url。

S203：浏览器从服务器下载所述网页的压缩纹理列表，并保存。

所述网页的压缩纹理列表如图2a所示，包括：所述网页上的Canvas使用的基础图片的url，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的url。

S204：浏览器判断目标基础图片的url是否在所述压缩纹理列表中。如果是，执行步骤S205。

网页游戏指定该网页上的一个目标基础图片后，浏览器根据该目标基础图片的url，查询保存的该网页的压缩纹理列表，判断该目标基础图片的url是否在所述压缩纹理列表中。

S205：浏览器将该目标基础图片的压缩纹理数据的url发送至服务器。

如果是，浏览器查询保存的该网页的压缩纹理列表，得到该目标基础图片的压缩纹理数据的url，并发送至服务器，服务器再根据此压缩纹理数据的url获得对应的压缩纹理数据。

可选的，如果所述目标基础图片的url不在所述压缩纹理列表中，浏览器向服务器发送所述目标基础图片的url及所述GPU支持的压缩格式或GPU型号，以使所述服务器根据所述目标基础图片的url及所述GPU支持的压缩格式或GPU型号，将所述基础图片下载下来，并利用图片转换工具转换成与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据。

S206：浏览器接收服务器发送的该目标基础图片对应的压缩纹理数据。

优选的，为了进一步降低压缩纹理数据的数据量，浏览器接收到的也可能为将所述压缩纹理数据进行进一步压缩后的压缩格式数据，例如服务器可以使用通用的无损压缩工具，如GZIP、ZIP等，将压缩纹理数据进行进一步压缩后发送至浏览器，或者服务器预存的即为将压缩纹理数据进行进一步压缩后的压缩格式数据的url。

S207：浏览器将所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制。

浏览器将所述压缩纹理数据发送至GPU后作为纹理，再由GPU将所纹理发送至Canvas进行绘制。

如果在S206中，浏览器接收到的为将压缩纹理数据经过进一步压缩的压缩格式数据，则浏览器在接收到此压缩格式数据后，需要使用对应的解压缩工具将所述压缩纹理数据解压缩出来。

如果网页游戏利用该基础图片进行游戏加载，则Canvas进一步利用该游戏中用到的其它的基础图片，结合后续的绘制动作，完成一帧游戏画面的绘制。

在本实施例中，该网页的url也可以为该网页的其他的唯一标识，相应的，该基础图片的url也可以为该基础图片的其他的唯一标识，该基础图片的压缩纹理数据的url也可以为该基础图片的压缩纹理数据的其他的地址标识。

由上述实施例可以看出，浏览器将服务器上预存的压缩纹理列表下载下来，当解析到包含Canvas标签的网页时，查询所述压缩纹理列表，以获得Canvas上使用的基础图片对应的压缩纹理数据的url，将此压缩纹理数据的url发送至服务器，并接收服务器根据该压缩纹理数据的url发送的所述基础图片的压缩纹理数据。由于浏览器接收到的该压缩纹理数据相对于该基础图片的bitmap格式数据来说，数据量小，所以浏览器将压缩纹理数据上传至GPU时速度较快，在节省了GPU内存的同时，GPU也能将该压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。并且由于网页没有做任何修改，可以使浏览器自动执行上述加载步骤，也提高了浏览器的灵活适应性。

参见图3，为本申请图片加载方法提供的另一个实施例的流程示意图，所述方法包括以下步骤：

S301：浏览器解析网页中的图片是否包含用于标识基础图片的预设属性，如果包含，进行步骤S302。

可以预先在html的img元素中，增加一个属性A，该属性描述当前图片用于Canvas的绘制。可选的，如果服务器为游戏厂商提供的游戏服务器，有可能只提供某几种压缩纹理格式的压缩纹理数据，这种情况下可以再增加一个属性B，该属性用于描述当前图片由游戏服务器提供的压缩纹理数据的格式。

S302：浏览器将该图片识别为基础图片，并获得所述基础图片的url。

浏览器通过解析属性A，判断该图片是否为Canvas使用的基础图片。

S303：浏览器将该基础图片的url及GPU支持的压缩纹理格式发送至服务器。

如果所述服务器为游戏服务器，浏览器根据所述属性B指示的压缩纹理格式，结合终端的GPU支持的压缩纹理格式，选择出一个共同支持的压缩纹理格式，并将所述共同支持的压缩纹理格式发送至服务器。

S304：浏览器接收服务器发送的该基础图片的压缩纹理数据。

服务器可以预先保存各个基础图片对应的各个压缩格式的压缩纹理数据的url，由服务器根据该基础图片的url和GPU支持的压缩格式进行查找，以获取所述基础图片的压缩纹理数据。

可选的，如果服务器为游戏厂商提供的游戏服务器，则服务器也可以只保存基础图片的预设的几种压缩纹理格式的压缩纹理数据。

可选的，服务器也可以根据浏览器发送的该基础图片的url，将所述基础图片下载下来，并利用图片转换工具将该基础图片转换成与该目标基础图片对应，并且与该浏览器发送的GPU支持的压缩格式一致的压缩纹理数据。

可选的，为了进一步降低压缩纹理数据的数据量，浏览器接收到的也可能为将所述压缩纹理数据进行进一步压缩后的压缩格式数据，例如服务器可以使用通用的无损压缩工具，如GZIP、ZIP等，将压缩纹理数据进行进一步压缩后发送至浏览器，或者服务器预存的即为将压缩纹理数据进行进一步压缩后的压缩格式数据的url。

S305：浏览器将该压缩纹理数据发送至GPU，以使GPU将该压缩纹理数据发送至Canvas进行绘制。

浏览器将所述压缩纹理数据发送至GPU后作为纹理，再由GPU将所纹理发送至Canvas进行绘制。如果网页游戏利用该基础图片进行游戏加载，则Canvas进一步利用该游戏中用到的其它的基础图片，结合后续的绘制动作，完成一帧游戏画面的绘制。

如果在S304中，浏览器接收到的为将压缩纹理数据经过进一步压缩的压缩格式数据，则浏览器在接收到此压缩格式数据后，需要使用对应的解压缩工具将所述压缩纹理数据解压缩出来。

在本实施例中，该网页的url也可以为该网页的其他的唯一标识，相应的，该基础图片的url也可以为该基础图片的其他的唯一标识，该基础图片的压缩纹理数据的url也可以为该基础图片的压缩纹理数据的其他的地址标识。

由上述实施例可以看出，浏览器通过解析图片的预设属性，识别出基础图片，并从服务器获取所述基础图片的压缩纹理数据。由于浏览器接收到的该压缩纹理数据相对于该基础图片的bitmap格式数据来说，数据量小，所以浏览器将压缩纹理数据上传至GPU时速度较快，在节省了GPU内存的同时，GPU也能将该压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。并且通过设置图片的预设属性，可以使浏览器对指定的图片进行加载，提高了加载图片的针对性。

参见图4，为本申请图片加载方法提供的另一个实施例的流程示意图，所述方法包括以下步骤：

S401：服务器接收浏览器发送的请求下载基础图片对应的压缩纹理数据的请求消息。

服务器接收到的请求消息中可以包含所述基础图片对应的压缩格式数据的地址标识，或者包含所述基础图片的标识，及GPU支持的压缩纹理格式。

S402：服务器根据所述请求消息，获得包含所述压缩纹理数据的压缩格式数据。

服务器可以预先保存所述压缩纹理数据的地址标识。当所述请求消息中包含所述压缩格式数据的地址标识时，服务器直接根据所述压缩格式数据的地址标识，获得所述压缩纹理数据。

可选的，服务器也可以根据所述请求消息中包含的所述基础图片的标识，将所述基础图片下载下来，并利用图片转换工具将所述基础图片转换成与所述GPU支持的压缩格式一致的压缩纹理数据。

可选的，为了进一步降低压缩纹理数据的数据量，浏览器也可以将所述压缩纹理数据进行进一步压缩，例如服务器可以使用通用的无损压缩工具，如GZIP、ZIP等，将压缩纹理数据进行进一步压缩后发送至浏览器，或者服务器预存的即为将压缩纹理数据进行进一步压缩后的压缩格式数据。

S403：服务器将包含所述压缩纹理数据的压缩格式数据发送至浏览器，以使所述浏览器将所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制。

如果服务器发送的为压缩纹理数据经过进一步压缩的压缩格式数据，浏览器收到后需利用相应的解压缩工具将所述压缩纹理数据解压缩出来。

在本实施例中，该基础图片的标识也可以具体为该基础图片的url或其他的唯一标识，该基础图片的压缩纹理数据的地址标识也可以具体为该基础图片的压缩纹理数据的url，或其他的唯一地址标识。

由上述实施例可以看出，浏览器根据浏览器发送的请求消息，获得基础图片的压缩纹理数据，将所述压缩纹理数据发送至浏览器，以使浏览器将所述压缩纹理数据发送至GPU后，由GPU发送至Canvas进行绘制。由于服务器向浏览器发送的所述压缩纹理数据的数据量小，所以浏览器将该压缩纹理数据上传至GPU时速度较快，在节省了GPU内存的同时，GPU也能将该压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。

参见图5，为本申请图片加载方法提供的另一个实施例的流程示意图，所述方法包括以下步骤：

S501：服务器预先保存压缩纹理列表。

服务器可以是浏览器厂商提供的，预先保存了大量的已知网页的压缩纹理列表，也可以是游戏厂商提供的游戏服务器，根据某一个或几个游戏而专门定制的，保存该游戏中用到的基础图片对应的压缩纹理数据。

服务器预先保存各个网页的压缩纹理列表，每一个网页的压缩纹理列表中包含该网页的url、该网页上的Canvas使用的基础图片的url、所述基础图片对应的各种压缩纹理格式的压缩纹理数据的url，如图2a所示。

S502：服务器接收浏览器发送的目标网页的url及GPU支持的压缩格式。

S503：服务器查询保存的所述压缩纹理列表，获得该目标网页的压缩纹理列表。

服务器根据该目标网页的url和GPU支持的压缩格式，查询保存的压缩纹理列表，获得该目标网页的压缩纹理列表，获得的该目标网页的压缩纹理列表包含该网页上的Canvas使用的基础图片的url，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的url。

S504：服务器将该目标网页的压缩纹理列表发送至浏览器。

服务器将查询到的该目标网页的压缩纹理列表发送至浏览器，以使浏览器保存该网页的压缩纹理列表，并根据指定的目标基础图片向服务器发送请求下载目标基础图片对应的压缩纹理数据的请求消息。

S505：服务器接收浏览器发送的包含压缩纹理数据的url的请求消息。

S506：服务器根据所述压缩纹理数据的url获得所述压缩纹理数据。

S507：服务器将所述压缩纹理数据发送至浏览器，以使浏览器进一步将所述压缩纹理数据发送至GPU后，由GPU发送至Canvas进行绘制。

在该实施例中，服务器也可以将压缩纹理数据进行进一步无损压缩后，形成对应的压缩格式数据，并给所述压缩格式数据分配一个url，即本实施例中的压缩纹理数据的url也可以替换成压缩纹理数据对应的压缩格式数据的url，服务器将该压缩格式数据发送至浏览器后，再由浏览器使用对应的解压缩工具将压缩纹理数据解压出来。

优选的，当目标基础图片的url不在浏览器保存的网页的压缩纹理列表中时，服务器接收浏览器发送的该目标基础图片的url，及GPU支持的压缩纹理格式，根据该目标基础图片的url将该目标基础图片下载下来，并利用压缩工具将该目标基础图片转换成压缩纹理数据，最后将该压缩纹理数据发送给浏览器。当然，该压缩纹理数据也可以进一步进行通用的无损压缩，形成对应的压缩格式的数据。

可选的，在本实施例中，服务器接收到的也可以是GPU的型号而不是GPU支持的压缩纹理格式，因为GPU型号可以反映GPU支持的压缩纹理格式，服务器根据该GPU的型号确定GPU支持的压缩纹理格式。

在本实施例中，对浏览器如何确定目标基础图片不作限制，如浏览器可以通过解析网页中的Canvas标签来确定Canvas上使用的基础图片，或者预先在html的img元素中，增加一个属性，用于标识当前图片为用于Canvas绘制的基础图片，浏览器通过解析该属性，确定目标基础图片。

在本实施例中，该网页的url也可以为该网页的其他的唯一标识，相应的，该基础图片的url也可以为该基础图片的其他的唯一标识，该基础图片的压缩纹理数据的url也可以为该基础图片的压缩纹理数据的其他的地址标识。

由上述实施例可以看出，服务器预先保存网页中的Canvas用到的基础图片的压缩纹理数据的信息，并根据浏览器的请求将该压缩纹理数据发送至浏览器，进一步由浏览器发送至GPU后上传到Canvas进行绘制。由于服务器向浏览器发送的所述压缩纹理数据的数据量小，所以浏览器将该压缩纹理数据上传至GPU时速度较快，在节省了GPU内存的同时，GPU也能将该压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。

参见图6，为本申请图片加载方法提供的另一个实施例的流程示意图，所述方法包括以下步骤：

S601：服务器接收浏览器发送的请求下载目标基础图片对应的压缩纹理数据的请求消息。

该请求消息中包含该目标基础图片的url，及GPU支持的压缩纹理格式。

S602：服务器根据该目标基础图片的url，获得该目标基础图片。

服务器根据该目标基础图片的url，将该目标基础图片下载下来。

S603：服务器利用图片转换工具，将该目标基础图片转换成压缩纹理数据。

服务器利用图片转换工具和GPU支持的压缩纹理格式，将该目标基础图片转换成与所述GPU支持的压缩纹理格式一致的压缩纹理数据。

优选的，为了进一步降低数据量，服务器还可以将压缩纹理数据进行进一步无损压缩，形成对应的压缩格式数据。

S604：服务器将该压缩纹理数据发送至浏览器。

服务器将该压缩纹理数据或对应的压缩格式数据发送至浏览器，以使浏览器将该压缩纹理数据上传至GPU作为一个纹理，再由GPU将此纹理发送到Canvas进行绘制。

在本实施例中，对浏览器如何确定目标基础图片不作限制，如浏览器可以通过解析网页中的Canvas标签来确定Canvas上使用的基础图片，或者预先在html的img元素中，增加一个属性，用于标识当前图片为用于Canvas绘制的基础图片，浏览器通过解析该属性，确定目标基础图片。

在本实施例中，该网页的url也可以为该网页的其他的唯一标识，相应的，该基础图片的url也可以为该基础图片的其他的唯一标识，该基础图片的压缩纹理数据的url也可以为该基础图片的压缩纹理数据的其他的地址标识。

由上述实施例可以看出，服务器可以根据浏览器的请求，将浏览器指定的基础图片转换为压缩纹理数据，并发送给浏览器，进一步由浏览器发送至GPU后上传到Canvas进行绘制。由于服务器向浏览器发送的所述压缩纹理数据的数据量小，所以浏览器将该压缩纹理数据上传至GPU时速度较快，在节省了GPU内存的同时，GPU也能将该压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。服务器可以根据浏览器的请求，将指定的基础图片进行压缩，而无需进行预存，节约了服务器的存储，提高了处理的针对性。

相应于上述的图片加载方法实施例，本申请还提供了图片加载装置实施例。

参见图7，为本申请图片加载装置提供的一个实施例的结构示意图。

所述装置包括：生成单元1，第一发送单元2，接收单元3，第二发送单元4。

其中，生成单元1，用于生成请求下载基础图片对应的压缩纹理数据的请求消息。

第一发送单元2，用于向服务器发送所述生成单元1生成的请求消息。

接收单元3，用于接收服务器根据所述第一发送单元2发送的请求消息发送的包含所述基础图片对应的压缩纹理数据的压缩格式数据。

第二发送单元4，用于将所述压缩格式数据中包含的所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制。

参见图8，为本申请的生成单元的一个结构示意图。

在本申请实施例中，生成单元1包括：第一判断子单元101，第一发送子单元102，下载子单元103，指定子单元104，第二判断子单元105，第一生成子单元106。

其中，第一判断子单元101，用于判断网页是否包含Canvas标签。

第一发送子单元102，用于当所述第一判断子单元101判断出所述网页包含Canvas标签时，将所述网页的标识及GPU支持的压缩格式发送至服务器，以使服务器根据所述网页的标识，查询到所述网页上使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识。可选的，所述GPU支持的压缩格式可以用GPU的型号信息来代替，所述网页的标识可以具体为网页的url，基础图片的标识也可以具体为基础图片的url，压缩纹理数据的地址标识可以具体为压缩纹理数据的地址标识。

下载子单元103，用于从服务器下载所述网页的压缩纹理列表，并保存在所述网页中，所述压缩纹理列表包括：所述网页上的Canvas使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识。

指定子单元104，用于指定目标基础图片。

第二判断子单元105，用于判断所述指定子单元104指定的目标基础图片的标识是否在所述压缩纹理列表中。

第一生成子单元106，用于当所述第二判断子单元105判断出所述目标基础图片的标识在所述压缩纹理列表中时，生成请求下载所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据。

可选的，在本实施例中，所述生成单元1还可以包括：第二发送子单元107（图中未示出）用于当所述目标基础图片的标识不在所述压缩纹理列表时，向服务器发送所述目标基础图片的标识及所述GPU支持的压缩格式，以使所述服务器根据所述目标基础图片的标识及所述GPU支持的压缩格式，利用图片转换工具生成与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据。

参见图9，为本申请的生成单元的另一个结构示意图。

在本申请实施例中，生成单元1包括第一解析子单元108，标识子单元109，第二生成子单元110。

在本实施例中，网页的url也可以为网页的其他唯一标识，基础图片的url也可以为基础图片的其他唯一标识，基础图片的压缩纹理数据的url也可以为基础图片的压缩纹理数据的其他的地址标识。

第一解析子单元108，用于解析网页中的图片是否包含第一预设属性，所述第一预设属性用于标识所述图片为Canvas使用的基础图片。例如可以预先在html的img元素中，增加一个属性A，该属性描述当前图片用于Canvas的绘制。也可以只提供某几种压缩纹理格式的压缩纹理数据，这种情况下可以再增加一个第二预设属性，该属性用于描述只提供哪几种格式的压缩纹理数据。

标识子单元109，用于当所述解析子单元108解析出所述网页中的图片包含所述预设属性时，将所述图片识别为基础图片，并获得所述基础图片的url。

第二生成子单元110，用于生成请求下载所述标识子单元109标识的所述基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述基础图片的url及所述GPU支持的压缩格式，所述请求消息用于向服务器获取所述基础图片的压缩纹理数据。如果包含第二预设属性时，还可以再增加第二解析子单元和选择子单元、第三生成子单元（这三个子单元图中均未示出）。第二解析子单元用于解析网页中的图片是否包含第二预设属性；选择子单元用于从GPU支持的压缩格式和所述服务器提供的压缩纹理数据对应的压缩格式中选择一个作为目标压缩格式；第三生成子单元，用于生成请求下载基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述基础图片的标识及所述目标压缩格式，所述请求消息用于向服务器获取所述基础图片的压缩纹理数据。

参见图10为本申请的第二发送单元的结构示意图，第二发送单元4包括解压缩子单元401，第三发送子单元402。

解压缩子单元401，用于使用解压缩工具对所述接收单元3收到的压缩格式数据进行解压缩，以解析出该压缩格式数据中包含的压缩纹理数据。

第三发送子单元402，用于将所述解压缩子单元401解压出的压缩纹理数据发送至GPU。

由上述实施例可以看出，该装置能够从服务器获取基础图片的压缩纹理数据，并发送至GPU，再由GPU发送至Canvas进行绘制，所述压缩纹理数据的数据量小，所以浏览器将该压缩纹理数据上传至GPU时速度较快，在节省了GPU内存的同时，GPU也能将该压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。

参见图11，为本申请图片加载装置提供的另一个实施例的结构示意图。

该装置包括：第一接收单元6，获得单元7，第三发送单元8。

其中，第一接收单元6，用于接收浏览器发送的请求下载基础图片对应的压缩纹理数据的请求消息。

获得单元7，用于根据所述第一接收单元6接收的所述请求消息，获得包含所述压缩纹理数据的压缩格式数据。

第三发送单元8，用于将所述获得单元7获得的包含所述压缩纹理数据的压缩格式数据发送至浏览器，以使所述浏览器将所述压缩纹理数据发送至GPU后作为纹理，以使所述GPU将所述纹理发送至Canvas进行绘制。

参见图12，为本申请图片加载装置提供的另一个实施例的结构示意图。

所述装置包括：预存单元9，第二接收单元10，查询单元11，第四发送单元12，第一接收单元6，获得单元7，第三发送单元8。

在本实施例中，网页的url也可以为网页的其他唯一标识，基础图片的url也可以为基础图片的其他唯一标识，基础图片的压缩纹理数据的url也可以为基础图片的压缩纹理数据的其他的地址标识。

其中，预存单元9，用于预先保存网页的压缩纹理列表，所述网页的压缩纹理列表中包含所述网页的url、所述网页上的Canvas使用的基础图片的url、所述基础图片对应的压缩纹理数据的url；

第二接收单元10，用于接收浏览器发送的目标网页的url及GPU支持的压缩格式；

查询单元11，用于根据所述第二接收单元10接收的所述目标网页的url和GPU支持的压缩格式，查询所述目标网页的压缩纹理列表，获得所述目标网页上的Canvas使用的基础图片的url，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的url。

第四发送单元12，用于将所述查询单元11查询到的所述目标网页上的Canvas使用的基础图片的url，和与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的url发送至所述浏览器，以使所述浏览器根据指定的目标基础图片向所述服务器发送请求下载所述基础图片对应的压缩纹理数据的请求消息。

所述第一接收单元6，获得单元7，第三发送单元8，与图11所示的实施例中标号相同的模块的功能也相同，此处不再赘述。

参见图13，在本申请实施例中，获得单元7包括：第三判断子单元701，第四判断子单元702，查询子单元703。

在本实施例中，网页的url也可以为网页的其他唯一标识，基础图片的url也可以为基础图片的其他唯一标识，基础图片的压缩纹理数据的url也可以为基础图片的压缩纹理数据的其他的地址标识。

其中，第三判断子单元701，用于判断所述请求消息中是否包含所述基础图片的url和GPU支持的压缩格式；

第四判断子单元702，用于当所述第三判断子单元701判断出所述请求消息中包含所述基础图片的url和GPU支持的压缩格式时，判断所述基础图片的url是否在服务器预先保存的压缩纹理列表中；

查询子单元703，用于当所述第四判断子单元72判断出所述基础图片的url在服务器预先保存的压缩纹理列表中时，根据所述基础图片的url和GPU支持的压缩格式，查询保存的压缩纹理列表，以获得所述压缩纹理数据，所述压缩纹理数据与所述GPU支持的压缩格式一致。

参见图14，在本实施例中，所述获得单元7包括：第三判断子单元701，第四判断子单元702，查询子单元703，第一下载子单元704，第一转换子单元705。

在本实施例中，网页的url也可以为网页的其他唯一标识，基础图片的url也可以为基础图片的其他唯一标识，基础图片的压缩纹理数据的url也可以为基础图片的压缩纹理数据的其他的地址标识。

其中，所述第三判断子单元701，第四判断子单元702，查询子单元703，与图11所示的实施例中标号相同的模块的功能也相同，此处不再赘述。

第一下载子单元704，用于当所述第四判断子单元702判断出所述基础图片的url不在服务器预先保存的压缩纹理列表中时，根据所述请求消息中包含的所述基础图片的url，将所述基础图片下载下来；

第一转换子单元705，用于根据所述请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述下载单元下载的所述基础图片转换成与所述GPU支持的压缩格式一致的压缩纹理数据。

参见图15，在本实施例中，所述获得单元7包括：第二下载子单元706，第二转换子单元707。

在本实施例中，网页的url也可以为网页的其他唯一标识，基础图片的url也可以为基础图片的其他唯一标识，基础图片的压缩纹理数据的url也可以为基础图片的压缩纹理数据的其他的地址标识。

第二下载子单元706，用于根据所述第一接收单元接收的请求消息中包含的所述基础图片的url，将所述基础图片下载下来；

第二转换子单元707，用于根据所述第一接收单元接收的请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述下载子单元下载的所述基础图片转换成与所述GPU支持的压缩一致的压缩纹理数据。

由上述实施例可以看出，该装置能够获取基础图片的压缩纹理数据，并发送至浏览器，进一步由浏览器发送至GPU，发送至Canvas进行绘制，所述压缩纹理数据的数据量小，所以浏览器将该压缩纹理数据上传至GPU时速度较快，在节省了GPU内存的同时，GPU也能将该压缩纹理数据快速发送至Canvas，加快Canvas的绘制速度。

本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件的方式来实现，通用硬件包括通用集成电路、通用CPU、通用存储器、通用元器件等，当然也可以通过专用硬件包括专用集成电路、专用CPU、专用存储器、专用元器件等来实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁碟、光盘等，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述的本发明实施方式，并不构成对本发明保护范围的限定。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (14)

1.一种图片加载方法，其特征在于，包括：

浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息；

浏览器向服务器发送所述请求消息；

浏览器接收服务器根据所述请求消息发送的包含所述基础图片对应的压缩纹理数据的压缩格式数据；

浏览器将所述压缩格式数据中包含的所述压缩纹理数据发送至图形处理器GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制；

其中，所述浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息包括：

浏览器判断目标网页是否包含Canvas标签；

如果包含，浏览器将所述目标网页的标识及GPU支持的压缩格式发送至服务器，以使服务器根据所述目标网页的标识，查询到所述目标网页上使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；

浏览器从服务器下载所述目标网页的压缩纹理列表，并进行保存，所述压缩纹理列表包括：所述网页上的Canvas使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；

浏览器指定目标基础图片；

浏览器判断所述目标基础图片的标识是否在所述压缩纹理列表中；

如果在所述压缩纹理列表中，浏览器生成请求下载所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据；

和/或，所述浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息包括：

浏览器解析目标网页中的图片是否包含第一预设属性，所述第一预设属性用于标识所述图片为基础图片；

如果包含，则浏览器将所述图片识别为目标基础图片，并获得所述目标基础图片的标识；

浏览器生成请求下载所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述目标基础图片的标识及所述GPU支持的压缩格式，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据；

和/或，所述浏览器生成请求下载基础图片对应的压缩纹理数据的请求消息包括：

浏览器解析目标网页中的图片是否包含第一预设属性，所述第一预设属性用于标识所述图片为基础图片；

如果包含，则浏览器将所述图片识别为目标基础图片，并获得所述目标基础图片的标识；

浏览器解析所述目标基础图片是否包含第二预设属性，所述第二预设属性用于标识服务器提供的压缩纹理数据对应的压缩格式；

浏览器从GPU支持的压缩格式和所述服务器提供的压缩纹理数据对应的压缩格式中选择一个作为目标压缩格式；

浏览器生成请求下载所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述目标基础图片的标识及所述目标压缩格式，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据。

2.根据权利要求1所述的方法，其特征在于，如果所述目标基础图片的标识不在所述压缩纹理列表中，还包括：

浏览器向服务器发送所述目标基础图片的标识及所述GPU支持的压缩格式，以使所述服务器根据所述目标基础图片的标识及所述GPU支持的压缩格式，利用图片转换工具生成与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据。

3.根据权利要求1至2中任意一项所述的方法，其特征在于，浏览器将所述压缩格式数据中包含的所述压缩纹理数据发送至GPU，包括：

浏览器使用解压缩工具，对所述压缩格式数据进行解压缩，以解析出所述压缩纹理数据；

浏览器将所述压缩纹理数据发送至GPU。

4.一种图片加载方法，其特征在于，包括：

服务器接收浏览器发送的请求下载基础图片对应的压缩纹理数据的请求消息；

服务器根据所述请求消息，获得包含所述压缩纹理数据的压缩格式数据；

服务器将包含所述压缩纹理数据的压缩格式数据发送至浏览器，以使所述浏览器将所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制；

其中，还包括：

服务器预先保存网页的压缩纹理列表，所述网页的压缩纹理列表中包含所述网页的标识、所述网页上的Canvas使用的基础图片的标识、所述基础图片对应的压缩纹理数据的地址标识；

服务器接收浏览器发送的目标网页的标识及GPU支持的压缩格式；

服务器根据所述目标网页的标识和GPU支持的压缩格式，查询所述目标网页的压缩纹理列表，获得所述目标网页上的Canvas使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；

服务器将所述目标网页上的Canvas使用的基础图片的标识，和与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识发送至所述浏览器，以使所述浏览器根据指定的目标基础图片向所述服务器发送请求下载所述基础图片对应的压缩纹理数据的请求消息。

5.根据权利要求4所述的方法，其特征在于，服务器根据所述请求消息，获得包含所述压缩纹理数据的压缩格式数据包括：

服务器判断所述请求消息中是否包含所述基础图片的标识和GPU支持的压缩格式；

如果包含，服务器判断所述基础图片的标识是否在服务器预先保存的压缩纹理列表中；

如果是，服务器根据所述基础图片的标识和GPU支持的压缩格式，查询保存的压缩纹理列表，获得所述压缩纹理数据，所述压缩纹理数据与所述GPU支持的压缩格式一致。

6.根据权利要求5所述的方法，其特征在于，如果否，还包括：

服务器根据所述请求消息中包含的所述基础图片的标识，将所述基础图片下载下来；

服务器根据所述请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述基础图片转换成与所述GPU支持的压缩格式一致的压缩纹理数据。

7.根据权利要求4所述的方法，其特征在于，所述服务器根据所述请求消息，获得包含所述压缩纹理数据的压缩格式数据包括：

服务器根据所述请求消息中包含的所述基础图片的标识，将所述基础图片下载下来；

服务器根据所述请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述基础图片转换成与所述GPU支持的压缩一致的压缩纹理数据。

8.一种图片加载装置，其特征在于，所述装置包括：

生成单元，用于生成请求下载基础图片对应的压缩纹理数据的请求消息；

第一发送单元，用于向服务器发送所述生成单元生成的请求消息；

接收单元，用于接收服务器根据所述请求消息发送的包含所述基础图片对应的压缩纹理数据的压缩格式数据；

第二发送单元，用于将所述压缩格式数据中包含的所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制；

其中，所述生成单元包括：

第一判断子单元，用于判断目标网页是否包含Canvas标签；

第一发送子单元，用于当所述第一判断子单元判断出所述目标网页包含Canvas标签时，将所述目标网页的标识及GPU支持的压缩格式发送至服务器，以使服务器根据所述目标网页的标识，查询到所述目标网页上使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；

下载子单元，用于从服务器下载所述目标网页的压缩纹理列表，并进行保存，所述压缩纹理列表包括：所述目标网页上的Canvas使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；

指定子单元，用于指定目标基础图片；

第二判断子单元，用于判断所述指定子单元指定的目标基础图片的标识是否在所述压缩纹理列表中；

第一生成子单元，用于当所述第二判断子单元判断出所述目标基础图片的标识在所述压缩纹理列表中时，生成请求下载所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据；

和/或，所述生成单元包括：

第一解析子单元，用于解析目标网页中的图片是否包含第一预设属性，所述第一预设属性用于标识所述图片为基础图片；

标识子单元，用于当所述第一解析子单元解析出所述目标网页中的图片包含所述预设属性时，将所述图片识别为目标基础图片，并获得所述目标基础图片的标识；

第二生成子单元，用于生成请求下载所述标识子单元标识的所述目标基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述目标基础图片的标识及所述GPU支持的压缩格式，所述请求消息用于向服务器获取所述目标基础图片的压缩纹理数据；

和/或，所述生成单元包括：

第一解析子单元，用于解析目标网页中的图片是否包含第一预设属性，所述第一预设属性用于标识所述图片为基础图片；

标识子单元，用于当所述第一解析子单元解析出所述目标网页中的图片包含所述预设属性时，将所述图片识别为目标基础图片，并获得所述目标基础图片的标识；

第二解析子单元，用于解析所述目标基础图片是否包含第二预设属性，所述第二预设属性用于标识服务器提供的压缩纹理数据对应的压缩格式；

选择子单元，用于从所述GPU支持的压缩格式和所述服务器提供的压缩纹理数据对应的压缩格式中选择一个作为目标压缩格式；

第三生成子单元，用于生成请求下载基础图片对应的压缩纹理数据的请求消息，所述请求消息中包括所述基础图片的标识及所述目标压缩格式，所述请求消息用于向服务器获取所述基础图片的压缩纹理数据。

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

第二发送子单元，用于当所述第二判断子单元判断出所述目标基础图片的标识不在所述压缩纹理列表中时，向服务器发送所述目标基础图片的标识及所述GPU支持的压缩格式，以使所述服务器根据所述目标基础图片的标识及所述GPU支持的压缩格式，利用图片转换工具生成与所述目标基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据。

10.根据权利要求8至9中任意一项所述的装置，其特征在于，所述第二发送单元包括：

解压缩子单元，用于使用解压缩工具对所述接收单元收到的压缩格式数据进行解压缩，以解析出所述压缩纹理数据；

第三发送子单元，用于将所述解压缩子单元解压出的压缩纹理数据发送至GPU。

11.一种图片加载装置，其特征在于，所述装置包括：

第一接收单元，用于接收浏览器发送的请求下载基础图片对应的压缩纹理数据的请求消息；

获得单元，用于根据所述第一接收单元接收的所述请求消息，获得包含所述压缩纹理数据的压缩格式数据；

第三发送单元，用于将所述获得单元获得的包含所述压缩纹理数据的压缩格式数据发送至浏览器，以使所述浏览器将所述压缩纹理数据发送至GPU，以使所述GPU将所述压缩纹理数据发送至Canvas进行绘制；

所述装置还包括：

预存单元，用于预先保存网页的压缩纹理列表，所述网页的压缩纹理列表中包含所述网页的标识、所述网页上的Canvas使用的基础图片的标识、所述基础图片对应的压缩纹理数据的地址标识；

第二接收单元，用于接收浏览器发送的目标网页的标识及GPU支持的压缩格式；

查询单元，用于根据所述第二接收单元接收的所述目标网页的标识和GPU支持的压缩格式，查询所述目标网页的压缩纹理列表，获得所述目标网页上的Canvas使用的基础图片的标识，及与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识；

第四发送单元，用于将所述查询单元查询到的所述目标网页上的Canvas使用的基础图片的标识，和与所述基础图片对应，并且与所述GPU支持的压缩格式一致的压缩纹理数据的地址标识发送至所述浏览器，以使所述浏览器根据指定的目标基础图片向服务器发送请求下载所述基础图片对应的压缩纹理数据的请求消息。

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

第三判断子单元，用于判断所述请求消息中是否包含所述基础图片的标识和GPU支持的压缩格式；

第四判断子单元，用于当所述第三判断子单元判断出所述请求消息中包含所述基础图片的标识和GPU支持的压缩格式时，判断所述基础图片的标识是否在服务器预先保存的压缩纹理列表中；

查询子单元，用于当所述第四判断子单元判断出所述基础图片的标识在服务器预先保存的压缩纹理列表中时，根据所述基础图片的标识和GPU支持的压缩格式，查询保存的压缩纹理列表，以获得所述压缩纹理数据，所述压缩纹理数据与所述GPU支持的压缩格式一致。

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

第一下载子单元，用于当所述第四判断子单元判断出所述基础图片的标识不在服务器预先保存的压缩纹理列表中时，根据所述请求消息中包含的所述基础图片的标识，将所述基础图片下载下来；

第一转换子单元，用于根据所述请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述下载单元下载的所述基础图片转换成与所述GPU支持的压缩格式一致的压缩纹理数据。

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

第二下载子单元，用于根据所述第一接收单元接收的请求消息中包含的所述基础图片的标识，将所述基础图片下载下来；

第二转换子单元，用于根据所述第一接收单元接收的请求消息中包含的GPU支持的压缩格式，利用图片转换工具将所述下载子单元下载的所述基础图片转换成与所述GPU支持的压缩一致的压缩纹理数据。