图片加载方法及装置制造方法及图纸

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

【技术实现步骤摘要】
图片加载方法及装置
本专利技术涉及互联网领域，特别是涉及图片加载方法及装置。
技术介绍
目前很多网页游戏都是使用基于超文本标记语言HTML（HyperTextMark-upLanguage）的Canvas绘图工具来进行开发的，在这些游戏中，用一些基础图片如人物、动物、背景图案等，经过Canvas的进一步渲染、重复、填充等绘图操作，形成一帧完整的游戏画面。为了提高游戏玩家的用户体验，浏览器使用OpenGLES（OpenGLforEmbeddedSystems）技术来加速Canvas的绘制。OpenGLES将游戏中用到的基础图片上传至图形处理器GPU(GraphicProcessingUnit)后作为纹理（texture），然后Canvas利用该texture进行绘图。现有的利用OpenGLES进行Canvas绘制时，每个基础图片都对应一个统一资源定位符url(UniformResourceLocator)，浏览器根据该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将所述压缩纹理数据发送至Canvas进行绘制。

【技术特征摘要】
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进行绘制；其中，所述生成单元包括：第一判断...

【专利技术属性】
技术研发人员：陈炳辉，
申请(专利权)人：武汉极讯软件有限责任公司，
类型：发明
国别省市：