CN113761417A - 一种图片加载方法和装置 - Google Patents

Abstract

本发明公开了一种图片加载方法和装置，涉及互联网技术领域。该方法的一具体实施方式包括：接收图片加载指令，其中，图片加载指令指示了待加载图片的第一格式以及待加载图片的色彩信息；确定当前浏览器是否兼容第一格式的图片，如果否，根据待加载图片的色彩信息，将待加载图片的第一格式转换为第二格式，其中，第二格式的图片与当前浏览器兼容；在当前浏览器中加载第二格式的待加载图片。该实施方式对于第一格式的图片而言，实现了即使在不兼容第一格式的浏览器中也可以加载该图片的效果，进而扩展了第一格式的应用场景。

Description

一种图片加载方法和装置

技术领域

本发明涉及互联网技术领域，尤其涉及一种图片加载方法和装置。

背景技术

目前互联网上传输的数据中，图片格式的数据占据了较高的比例。为了减少数据量、提升网络传输速度，谷歌针对图片推出了WebP格式，相比于PNG，JPG等格式，WebP格式采用了更优的图像数据压缩算法，不仅拥有更小的图片体积，并且拥有肉眼识别无差异的图片质量。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

WebP格式虽然拥有更优的性能，但是浏览器对WebP格式的图片兼容性较差，主流的浏览器中，只有Chrome浏览器、Opera浏览器以及安卓系统对应的浏览器能够兼容WebP格式的图片，其他浏览器均无法加载WebP格式的图片，限制了WebP格式的应用场景。

发明内容

有鉴于此，本发明实施例提供一种图片加载方法和装置，在接收到图片加载指令后，能够判断当前浏览器是否兼容第一格式，如果当前浏览器不兼容第一格式，则根据图片加载指令中所指示的待加载图片的色彩信息，将待加载图片从第一格式转换为当前浏览器兼容的第二格式，再在当前浏览器上加载该第二格式的待加载图片，从而对于第一格式的图片而言，实现了即使在不兼容第一格式的浏览器中也可以加载该图片的效果，进而扩展了第一格式的应用场景。

为实现上述目的，根据本发明实施例的一个方面，提供了一种图片加载方法。

本发明实施例的一种图片加载方法包括：

接收图片加载指令，其中，图片加载指令指示了待加载图片的第一格式以及待加载图片的色彩信息；

确定当前浏览器是否兼容第一格式的图片，如果否，根据待加载图片的色彩信息，将待加载图片的第一格式转换为第二格式，其中，第二格式的图片与当前浏览器兼容；

在当前浏览器中加载第二格式的待加载图片。

可选地，

待加载图片的色彩信息包括：待加载图片上每一个像素点的颜色值；

将待加载图片的第一格式转换为第二格式，包括：

根据每一个像素点的颜色值，在canvas上绘制待加载图片；

将绘制出的待加载图片保存为第二格式。

可选地，

第一格式为WEBP格式；

和/或，

第二格式为JPG格式、PNG格式或GIF格式。

可选地，

待加载图片的色彩信息包括：待加载图片的色彩空间；

将待加载图片的第一格式转换为第二格式，包括：

当色彩空间为RGB时，将待加载图片的格式转换为JPG格式；

当色彩空间为RGBA时，将待加载图片的格式转换为PNG格式。

可选地，

待加载图片的色彩信息包括：待加载图片的色彩模式；

将待加载图片的第一格式转换为第二格式，包括：

当色彩模式指示待加载图片未使用alpha通道时，将待加载图片的格式转换为JPG格式；

当色彩模式指示待加载图片使用alpha通道时，将待加载图片的格式转换为PNG格式。

可选地，

确定当前浏览器是否兼容第一格式的图片，包括：

根据预设检测图片模板和第一格式，向当前浏览器发送与第一格式相对应的检测图片，以使当前浏览器通过Image对象加载检测图片，确定当前浏览器是否兼容第一格式的图片；其中，预设检测图片模板是根据第一格式的不同模式生成的。

可选地，

确定当前浏览器是否兼容第一格式的图片，包括：

在当前浏览器中加载第一格式的待加载图片，以使当前浏览器通过Image对象加载待加载图片，确定当前浏览器是否兼容第一格式的图片。

可选地，

在当前浏览器中加载第二格式的待加载图片，包括：

将第二格式的待加载图片加载为Texture文件，以根据Texture文件在当前浏览器中显示待加载图片。

可选地，

当当前浏览器兼容第一格式的图片时，该方法还包括：

将第一格式的待加载图片加载为Texture文件，以根据Texture文件在当前浏览器中显示待加载图片。

为实现上述目的，根据本发明实施例的又一方面，提供了一种图片加载装置。

本发明实施例的一种图片加载装置包括指令接受模块、格式确定模块以及图片加载模块；其中：

指令接受模块，用于接收图片加载指令，其中，图片加载指令指示了待加载图片的格式以及待加载图片的色彩信息；

格式确定模块，用于确定待加载图片的第一格式，判断当前浏览器是否兼容第一格式的图片；如果否，根据待加载图片的色彩信息，将待加载图片的第一格式转换为第二格式，其中，第二格式的图片与当前浏览器兼容；

图片加载模块，用于在当前浏览器中加载第二格式的待加载图片。

为实现上述目的，根据本发明实施例的又一方面，提供了一种图片加载电子设备。

本发明实施例的一种图片加载电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现本发明实施例的一种图片加载方法。

为实现上述目的，根据本发明实施例的再一方面，提供了一种计算机可读存储介质。

本发明实施例的一种计算机可读存储介质，其上存储有计算机程序，程序被处理器执行时实现本发明实施例的一种图片加载方法。

上述发明中的一个实施例具有如下优点或有益效果：在接收到图片加载指令后，能够判断当前浏览器是否兼容第一格式，如果当前浏览器不兼容第一格式，则根据图片加载指令中所指示的待加载图片的色彩信息，将待加载图片从第一格式转换为当前浏览器兼容的第二格式，再在当前浏览器上加载该第二格式的待加载图片，从而对于第一格式的图片而言，实现了即使在不兼容第一格式的浏览器中也可以加载该图片的效果，进而扩展了第一格式的应用场景。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是当前主流浏览器对WebP格式的图片的兼容性情况；

图2是根据本发明实施例的一种图片加载方法的主要步骤的示意图；

图3是根据本发明实施例的另一种图片加载方法的流程图；

图4是根据本发明实施例的一种图片格式转换方法的流程图；

图5是根据本发明实施例的一种图片加载装置的主要模块的示意图；

图6是本发明实施例可以应用于其中的示例性系统架构图；

图7是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

需要指出的是，在不冲突的情况下，本发明的实施例以及实施例中的技术特征可以相互结合。

当前，越来越多的浏览器需要展示3D模型，而一个3D模型的模型包中会有几十张图片，图片体积占据了模型包总体积的60％以上，如果能够将图片体积进行压缩，就可以极大地缩小模型包的体积，进而缩短模型包的网络传输时间。WebP格式的出现，就很好地解决了这个问题。

WebP格式是谷歌推出的一种图片格式，相较于传统的PNG、JPG等格式，WebP格式采用了更优的图像数据压缩算法，同样的图片质量，WebP格式的图片的体积比PNG、JPG等格式的图片的体积更小。如果在3D模型的模型包中使用webp格式的图片，不仅图片质量不会受到影响，而且图片体积比其他格式的图片体积更小，从而不仅在网络传输模型包的过程中耗时更短，而且在加载3D模型的过程中加载速度也更快。

但是，当前的浏览器对WebP格式的图片兼容性较差，如图1所示，其中浅色方块表示该浏览器版本兼容WebP格式的图片，深色方块表示该浏览器版本不兼容WebP格式的图片。由此可见，主流的浏览器中，只有Chrome浏览器、Opera浏览器以及安卓系统对应的浏览器能够兼容WebP格式的图片，其他浏览器如IE浏览器、火狐浏览器以及苹果系统对应的浏览器等均无法加载WebP格式的图片，限制了WebP格式的应用场景。

有鉴于此，本方案提出了一种图片加载方法和装置，以提高webp图片的兼容性，实现主流平台和浏览器都可以加载webp格式的图片的效果，扩展WebP格式的应用场景。

图2是根据本发明实施例的一种图片加载方法的主要步骤的示意图。

如图2所示，本发明实施例的一种图片加载方法主要包括以下步骤：

步骤S201：接收图片加载指令，其中，图片加载指令指示了待加载图片的第一格式以及待加载图片的色彩信息。

在本发明实施例中，待加载图片的第一格式为WebP格式，而待加载图片的色彩信息包括待加载图片上每一个像素点的颜色值，其中，该颜色值可以是待加载图片上每一个像素点的RGB值或RGBA值。

步骤S202：确定当前浏览器是否兼容第一格式的图片，如果否，根据待加载图片的色彩信息，将待加载图片的第一格式转换为第二格式，其中，第二格式的图片与当前浏览器兼容。

在本发明实施例中，可以根据第一格式选择相对应的检测图片，确定当前浏览器是否兼容第一格式的图片，也可以直接在当前浏览器中加载第一格式的待加载图片，确定当前浏览器是否兼容第一格式的图片。

下面以根据第一格式选择相对应的检测图片为例，对本发明实施例提供的一种确定当前浏览器是否兼容第一格式的图片的方法进行说明。

在本发明实施例中，由于第一格式即WebP格式又分为四种模式，分别为有损压缩、无损压缩、使用alpha通道、以及使用动画效果，因此可以分别针对这四种模式，生成预设检测图片模板。这样就可以在接收到图片加载指令所指示的待加载图片的第一格式之后，根据第一格式从预设检测图片模板中选择相对应的检测图片，并向当前浏览器发送与第一格式相对应的该检测图片，以使当前浏览器通过Image对象加载检测图片，确定出当前浏览器是否兼容第一格式的图片。

其中，分别针对WebP格式的四种模式，生成预设检测图片模板的方法，可以是在代码中针对这四种模式最小特征点，分别预设一个base64字符串，然后再根据预设的四个base64字符串，分别生成相应模式的预设检测图片模板。具体的实现代码如下：

以上述代码中的“lossy”为例：lossy后面的base64字符串是用于表征图片为WebP有损压缩模式的字符串，运行上述代码即可据此生成一张WebP有损压缩模式的图片作为预设检测图片模板，当待加载图片的第一格式为WebP有损压缩模式时，就可以将根据“lossy”生成的预设检测图片模板作为检测图片，检测当前浏览器是否支持WebP有损压缩模式的图片。同理，针对“lossless”(表征图片为WebP无损压缩模式)、“alpha”(表征图片使用alpha通道)以及“animation”(表征图片使用动画模式)，均可使用上述方法检测当前浏览器是否支持WebP相应模式的图片。

在本发明实施例中，还可以直接在当前浏览器中加载第一格式的待加载图片，以使当前浏览器通过Image对象加载待加载图片，确定当前浏览器是否兼容第一格式的图片。

在本发明实施例中，如果确定出当前浏览器兼容第一格式的图片时，如图3所示，可以直接由当前浏览器通过Image对象加载第一格式的待加载图片，然后使用THREE.JS的加载器TextureLoader，将该第一格式的待加载图片加载为GPU可读的Texture文件，以根据Texture文件在当前浏览器中显示待加载图片。

在本发明实施例中，如果确定出当前浏览器不兼容第一格式的图片时，可以加载webassembly转换函数对第一格式的待加载图片进行转换，如图4所示，将第一格式的待加载图片转换为当前浏览器兼容的第二格式。其中，webassembly转换函数需要从外部加载，加载的实现代码如下：

在本发明实施例中，将webassembly转换函数加载完成之后，可以通过webassembly转换函数从待加载图片的色彩信息中读取出待加载图片上每一个像素点的颜色值，再使用WebpToSDL函数库，根据每一个像素点的颜色值，在canvas上绘制出待加载图片，并将绘制出的待加载图片保存为第二格式。其中WebpToSDL函数库是封装的C++函数，运行速度快，可以几乎以C++代码运行速度对待加载图片的格式进行转换，但是由于浏览器环境不可以直接运行C++代码，所以还需要将C++代码编译成浏览器可运行的.wasm格式文件。上述过程具体的实现代码如下：

由于主流浏览器均兼容JPG格式、PNG格式或GIF格式的图片，因此，在本发明实施例中，第二格式可以为JPG格式、PNG格式或GIF格式。在本发明一个优选的实施例中，第二格式可以为JPG格式、PNG格式，以使转换后得到的待加载图片能够被更多的主流浏览器加载。

在本发明实施例中，可以根据待加载图片的色彩信息，确定转换后的第二格式是JPG格式还是PNG格式。具体地，当待加载图片的色彩信息包括待加载图片的色彩空间时，可以根据该色彩空间是RGB还是RGBA，确定将WebP格式转换为JPG格式还是PNG格式；当待加载图片的色彩信息包括待加载图片的色彩模式时，则可以根据该色彩模式所指示的待加载图片是否使用alpha通道，确定将WebP格式转换为JPG格式还是PNG格式。

当待加载图片的色彩信息包括：待加载图片的色彩空间时，将待加载图片的第一格式转换为第二格式的方法可以为；当色彩空间为RGB时，将待加载图片的格式转换为JPG格式；当色彩空间为RGBA时，将待加载图片的格式转换为PNG格式。

当待加载图片的色彩信息包括：待加载图片的色彩模式时，将待加载图片的第一格式转换为第二格式的方法可以为；当色彩模式指示待加载图片未使用alpha通道时，将待加载图片的格式转换为JPG格式；当色彩模式指示待加载图片使用alpha通道时，将待加载图片的格式转换为PNG格式。

步骤S203：在当前浏览器中加载第二格式的待加载图片。

在本发明实施例中，如果确定出当前浏览器不兼容第一格式的图片时，如图3所示，则先将待加载图片转换为第二格式，再由当前浏览器通过Image对象加载第二格式的待加载图片，然后使用THREE.JS的加载器TextureLoader，将该第二格式的待加载图片加载为GPU可读的Texture文件，以根据Texture文件在当前浏览器中显示待加载图片。

根据本发明实施例的一种图片加载方法可以看出，在接收到图片加载指令后，能够判断当前浏览器是否兼容第一格式，如果当前浏览器不兼容第一格式，则根据图片加载指令中所指示的待加载图片的色彩信息，将待加载图片从第一格式转换为当前浏览器兼容的第二格式，再在当前浏览器上加载该第二格式的待加载图片，从而对于第一格式的图片而言，实现了即使在不兼容第一格式的浏览器中也可以加载该图片的效果，进而扩展了第一格式的应用场景。

图5是根据本发明实施例的一种图片加载装置的主要模块的示意图。

如图5所示，本发明实施例的一种图片加载装置500包括指令接受模块501、格式确定模块502以及图片加载模块503；其中：

指令接受模块501，用于接收图片加载指令，其中，图片加载指令指示了待加载图片的格式以及待加载图片的色彩信息；

格式确定模块502，用于确定待加载图片的第一格式，判断当前浏览器是否兼容第一格式的图片；如果否，根据待加载图片的色彩信息，将待加载图片的第一格式转换为第二格式，其中，第二格式的图片与当前浏览器兼容；

图片加载模块503，用于在当前浏览器中加载第二格式的待加载图片。

在本发明实施例中，待加载图片的色彩信息包括：待加载图片上每一个像素点的颜色值；格式确定模块502进一步用于：根据每一个像素点的颜色值，在canvas上绘制待加载图片；将绘制出的待加载图片保存为第二格式。

在本发明实施例中，第一格式为WEBP格式；和/或，第二格式为JPG格式、PNG格式或GIF格式。

在本发明实施例中，待加载图片的色彩信息包括：待加载图片的色彩空间；格式确定模块502进一步用于：当色彩空间为RGB时，将待加载图片的格式转换为JPG格式；当色彩空间为RGBA时，将待加载图片的格式转换为PNG格式。

在本发明实施例中，待加载图片的色彩信息包括：待加载图片的色彩模式；格式确定模块502进一步用于：当色彩模式指示待加载图片未使用alpha通道时，将待加载图片的格式转换为JPG格式；当色彩模式指示待加载图片使用alpha通道时，将待加载图片的格式转换为PNG格式。

在本发明实施例中，格式确定模块502进一步用于：根据预设检测图片模板和第一格式，向当前浏览器发送与第一格式相对应的检测图片，以使当前浏览器通过Image对象加载检测图片，确定当前浏览器是否兼容第一格式的图片；其中，预设检测图片模板是根据第一格式的不同模式生成的。

在本发明实施例中，格式确定模块502进一步用于：在当前浏览器中加载第一格式的待加载图片，以使当前浏览器通过Image对象加载待加载图片，确定当前浏览器是否兼容第一格式的图片。

在本发明实施例中，图片加载模块503进一步用于：将第二格式的待加载图片加载为Texture文件，以根据Texture文件在当前浏览器中显示待加载图片。

在本发明实施例中，当当前浏览器兼容第一格式的图片时，图片加载模块503进一步用于：将第一格式的待加载图片加载为Texture文件，以根据Texture文件在当前浏览器中显示待加载图片。

根据本发明实施例的一种图片加载装置可以看出，在接收到图片加载指令后，能够判断当前浏览器是否兼容第一格式，如果当前浏览器不兼容第一格式，则根据图片加载指令中所指示的待加载图片的色彩信息，将待加载图片从第一格式转换为当前浏览器兼容的第二格式，再在当前浏览器上加载该第二格式的待加载图片，从而对于第一格式的图片而言，实现了即使在不兼容第一格式的浏览器中也可以加载该图片的效果，进而扩展了第一格式的应用场景。

图6示出了可以应用本发明实施例的一种图片加载方法或一种图片加载装置的示例性系统架构600。

如图6所示，系统架构600可以包括终端设备601、602、603，网络604和电子设备605。网络604用以在终端设备601、602、603和电子设备605之间提供通信链路的介质。网络604可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备601、602、603通过网络604与电子设备605交互，以接收或发送消息等。终端设备601、602、603上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备601、602、603可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

电子设备605可以是提供各种服务的服务器，例如对用户利用终端设备601、602、603所浏览的购物类网站提供支持的后台管理服务器。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息)反馈给终端设备。

需要说明的是，本发明实施例所提供的一种图片加载方法一般由电子设备605执行，相应地，一种图片加载装置一般设置于电子设备605中。

应该理解，图6中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图7，其示出了适于用来实现本发明实施例的终端设备的计算机系统700的结构示意图。图7示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，计算机系统700包括中央处理单元(CPU)701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中，还存储有系统700操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括指令接受模块、格式确定模块以及图片加载模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，指令接受模块还可以被描述为“用于接收图片加载指令的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：接收图片加载指令，其中，图片加载指令指示了待加载图片的第一格式以及待加载图片的色彩信息；确定当前浏览器是否兼容第一格式的图片，如果否，根据待加载图片的色彩信息，将待加载图片的第一格式转换为第二格式，其中，第二格式的图片与当前浏览器兼容；在当前浏览器中加载第二格式的待加载图片。

根据本发明实施例的技术方案，在接收到图片加载指令后，能够判断当前浏览器是否兼容第一格式，如果当前浏览器不兼容第一格式，则根据图片加载指令中所指示的待加载图片的色彩信息，将待加载图片从第一格式转换为当前浏览器兼容的第二格式，再在当前浏览器上加载该第二格式的待加载图片，从而对于第一格式的图片而言，实现了即使在不兼容第一格式的浏览器中也可以加载该图片的效果，进而扩展了第一格式的应用场景。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (12)

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

接收图片加载指令，其中，所述图片加载指令指示了待加载图片的第一格式以及所述待加载图片的色彩信息；

确定当前浏览器是否兼容所述第一格式的图片，如果否，根据所述待加载图片的色彩信息，将所述待加载图片的第一格式转换为第二格式，其中，所述第二格式的图片与所述当前浏览器兼容；

在所述当前浏览器中加载所述第二格式的待加载图片。

2.根据权利要求1所述的方法，其特征在于，所述待加载图片的色彩信息包括：所述待加载图片上每一个像素点的颜色值；

所述将所述待加载图片的第一格式转换为第二格式，包括：

根据所述每一个像素点的颜色值，在canvas上绘制所述待加载图片；

将绘制出的所述待加载图片保存为所述第二格式。

3.根据权利要求1或2所述的方法，其特征在于，

所述第一格式为WEBP格式；

和/或，

所述第二格式为JPG格式、PNG格式或GIF格式。

4.根据权利要求3所述的方法，其特征在于，所述待加载图片的色彩信息包括：所述待加载图片的色彩空间；

将所述待加载图片的第一格式转换为第二格式，包括：

当所述色彩空间为RGB时，将所述待加载图片的格式转换为JPG格式；

当所述色彩空间为RGBA时，将所述待加载图片的格式转换为PNG格式。

5.根据权利要求3所述的方法，其特征在于，所述待加载图片的色彩信息包括：所述待加载图片的色彩模式；

所述将所述待加载图片的第一格式转换为第二格式，包括：

当所述色彩模式指示所述待加载图片未使用alpha通道时，将所述待加载图片的格式转换为JPG格式；

当所述色彩模式指示所述待加载图片使用所述alpha通道时，将所述待加载图片的格式转换为PNG格式。

6.根据权利要求1所述的方法，其特征在于，所述确定当前浏览器是否兼容所述第一格式的图片，包括：

根据预设检测图片模板和所述第一格式，向所述当前浏览器发送与所述第一格式相对应的检测图片，以使所述当前浏览器通过Image对象加载所述检测图片，确定所述当前浏览器是否兼容所述第一格式的图片；其中，所述预设检测图片模板是根据所述第一格式的不同模式生成的。

7.根据权利要求1所述的方法，其特征在于，所述确定当前浏览器是否兼容所述第一格式的图片，包括：

在所述当前浏览器中加载所述第一格式的待加载图片，以使所述当前浏览器通过Image对象加载所述待加载图片，确定所述当前浏览器是否兼容所述第一格式的图片。

8.根据权利要求1所述的方法，其特征在于，所述在所述当前浏览器中加载所述第二格式的待加载图片，包括：

将所述第二格式的待加载图片加载为Texture文件，以根据所述Texture文件在所述当前浏览器中显示所述待加载图片。

9.根据权利要求1所述的方法，其特征在于，当所述当前浏览器兼容所述第一格式的图片时，该方法还包括：

将所述第一格式的待加载图片加载为Texture文件，以根据所述Texture文件在所述当前浏览器中显示所述待加载图片。

10.一种图片加载装置，其特征在于，包括指令接受模块、格式确定模块以及图片加载模块；其中：

所述指令接受模块，用于接收图片加载指令，其中，所述图片加载指令指示了待加载图片的格式以及所述待加载图片的色彩信息；

所述格式确定模块，用于确定所述待加载图片的第一格式，判断当前浏览器是否兼容所述第一格式的图片；如果否，根据所述待加载图片的色彩信息，将所述待加载图片的第一格式转换为第二格式，其中，所述第二格式的图片与所述当前浏览器兼容；

所述图片加载模块，用于在所述当前浏览器中加载所述第二格式的待加载图片。

11.一种图片加载电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-9中任一所述的方法。

12.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-9中任一所述的方法。

Images