CN111198999B - 一种网页端的图片加载方法、装置、介质和电子设备 - Google Patents

Abstract

本发明提供了一种网页端的图片加载方法、装置、介质和电子设备，其中，图片加载方法包括：对当前待加载图片进行图片解码，得到对应的图片像素数据；对图片像素数据进行图片渲染，将图片像素数据渲染至对应的网页展示位置和对应的宽高比例，得到渲染后的图片，并在网页端展示渲染后的图片。本发明通过配置预设图片解码器包，该预设图片解码器包能够解码多种现有的网页端浏览器不支持的图片格式类型，并在对图片进行解码，得到对应的图片像素数据之后，对图片像素数据进行图片渲染；这样，实现了对现有网页端不支持的图片格式的正确解码和正确解码后的渲染，并能够在网页端展示渲染后的图片。

Description

一种网页端的图片加载方法、装置、介质和电子设备

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种网页端的图片加载方法、装置、介质和电子设备。

背景技术

目前，在网页端加载图片的主要方式为，使用网页端浏览器内置标签进行图片渲染。现有的能够渲染的图片格式有限。无法渲染浏览器不支持的图片格式，例如，无法渲染浏览器不支持的图片格式HEIF(High Efficiency Image File Format，高效率图档格式)，也无法渲染浏览器不支持的图片格式WebP，WebP可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。

除了上述罗列浏览器不支持的图片格式之外，还有其它的图片格式。这样，当设计网页时，可供网页设计者选择的图片格式库中的图片是有限的。

目前，上述浏览器不支持的图片格式，无法进行正常渲染，在实际中，往往以“×”显示。因此，如果网页设计者选用的图片格式是上述浏览器无法渲染的图片格式，则在网页端无法正常显示。

发明内容

本发明的目的在于提供一种网页端的图片加载方法、装置、介质和电子设备，能够解决上述提到的至少一个技术问题。具体方案如下：

根据本发明的具体实施方式，第一方面，本发明提供一种网页端的图片加载方法，包括：

在当前待加载图片的图片加载链接中包含至少一种预设格式后缀的情况下，通过预设加载器对当前待加载图片进行图片加载；

在当前待加载图片的格式类型为预设图片解码器包能够解码的图片类型的情况下，对当前待加载图片进行图片解码，得到对应的图片像素数据；其中，预设图片解码器包能够解码的图片类型为多种网页端浏览器不支持的图片格式类型中的任意一种；

对所述图片像素数据进行图片渲染，将所述图片像素数据渲染至对应的网页展示位置和对应的宽高比例，得到渲染后的图片，并在网页端展示所述渲染后的图片。

根据本发明的具体实施方式，第二方面，本发明提供一种网页端的图片加载装置，包括：

图片加载单元，用于在当前待加载图片的图片加载链接中包含至少一种预设格式后缀的情况下，通过预设加载器对当前待加载图片进行图片加载；

图片解码单元，用于在所述图片加载单元加载的当前待加载图片的格式类型为预设图片解码器包能够解码的图片类型的情况下，对当前待加载图片进行图片解码，得到对应的图片像素数据；其中，预设图片解码器包能够解码的图片类型为多种网页端浏览器不支持的图片格式类型中的任意一种；

图片渲染单元，用于对所述图片解码单元解码的所述图片像素数据进行图片渲染，将所述图片像素数据渲染至对应的网页展示位置和对应的宽高比例，得到渲染后的图片；

图片展示单元，用于在网页端展示所述图片渲染单元渲染的所述渲染后的图片。

根据本发明的具体实施方式，第三方面，本发明提供一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上任一项所述的网页端的图片加载方法。

根据本发明的具体实施方式，第四方面，本发明提供一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上任一项所述的网页端的图片加载方法。

本发明实施例的上述方案与现有技术相比，至少具有以下有益效果：本发明通过提供一种网页端的图片加载方法、装置、介质和电子设备，通过配置预设图片解码器包，该预设图片解码器包能够解码多种现有的网页端浏览器不支持的图片格式类型，并在对图片进行解码，得到对应的图片像素数据之后，对图片像素数据进行图片渲染；这样，实现了对现有网页端不支持的图片格式的正确解码和正确解码后的渲染，并能够在网页端展示渲染后的图片。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示出了根据本发明实施例的网页端的图片加载方法的方法流程图；

图2示出了根据本发明实施例中具体应用场景中的网页端的图片加载方法的方法流程图；

图3示出了根据本发明的实施例的网页端的图片加载装置的结构示意图；

图4示出了根据本发明的实施例的电子设备连接结构示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

应当理解，尽管在本发明实施例中可能采用术语第一、第二、第三等来描述……，但这些……不应限于这些术语。这些术语仅用来将……区分开。例如，在不脱离本发明实施例范围的情况下，第一……也可以被称为第二……，类似地，第二……也可以被称为第一……。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

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

下面结合附图详细说明本发明的可选实施例。

实施例1

如图1所示，根据本公开实施例的具体实施方式，第一方面，本公开实施例提供一种业务处理方法，具体包括如下方法步骤：

S102：在当前待加载图片的图片加载链接中包含至少一种预设格式后缀的情况下，通过预设加载器对当前待加载图片进行图片加载。

在此步骤中，预设格式后缀可以为heic后缀，heic与传统的图片格式相比，它占用的内存更小，画质更加无损；但是，此种格式是无法在目前网页端浏览器正常显示的图片格式。

在此，仅仅列举了一种预设格式后缀，还可以有其它无法在目前网页端浏览器正常显示的图片格式类型，在此，不再赘述。

可选的，在当前待加载图片的图片加载链接中包含至少一种预设格式后缀的情况下，通过预设加载器对当前待加载图片进行图片加载之前，所述方法还包括以下步骤：

异步下载用来加载代码的代码加载器包，配置用于加载图片的各项参数，开启对原始图像标签状态的监听过程，并对监听结果进行标记，标记为对原始图像标签标记正确，或标记为对原始图像标签标记错误；这样，在不影响页面渲染性能的情况下，实现了对原始图像标签生成和报错的监听。

S104：在当前待加载图片的格式类型为预设图片解码器包能够解码的图片类型的情况下，对当前待加载图片进行图片解码，得到对应的图片像素数据；其中，预设图片解码器包能够解码的图片类型为多种网页端浏览器不支持的图片格式类型中的任意一种。

针对预设图片解码器包做如下说明：

预设图片解码器包能够解码的图片类型为多种网页端浏览器不支持的图片格式类型中的任意一种，在解码上述图片格式类型中的任意一种，得到对应的图片像素数据之后，使用图片渲染方法，将图片像素数据渲染至对应的网页展示位置和对应的宽高比例，得到渲染后的图片，并在网页端展示渲染后的图片；其中，预设图片解码器包采用C++代码编写，通过转换编译器转换成浏览器可执行代码。

在实际应用中，预设图片解码器包能够解码的图片类型可以为HEIF(HighEfficiency Image File Format，高效率图档格式)，也可以为WebP。

需要说明的是，HEIF高效率图档格式可以用更少的容量存储画质更好的照片，并且在连拍、动图和色彩变化不大的照片上效果尤其明显。WebP可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。

上述仅仅罗列了常见的两种预设图片解码器包能够解码的图片类型，还可以有其它网页端浏览器不支持的图片格式类型，在此不再赘述。

在此步骤中，对应的图片像素数据至少包括以下一项：在网页中对应的展示位置、在网页中对应的展示范围、图片宽高比例。上述仅仅罗列了常见的图片像素数据，除了上述图片像素数据之外，还可以有其它图片像素数据，在此不再赘述。

可选的，本公开实施例提供的网页端的图片加载方法还包括以下步骤：

在当前待加载图片的格式类型不是预设图片解码器包能够解码的图片类型的情况下，对当前待加载图片的格式类型进行解码失败，并返回对应的第一信息，第一信息用于指示对当前待加载图片的格式类型进行解码失败。

可选的，在对图片像素数据进行渲染之前，所述方法还包括：读取当前加载图片对应的原图片像素数据；其中，原图片像素数据至少包括以下一项：在网页中的第一展示位置、在网页中的展示范围、第一图片宽高比例。上述仅仅罗列了常见的图片像素数据，除了上述图片像素数据之外，还可以有其它图片像素数据，在此不再赘述。

可选的，本公开实施例提供的网页端的图片加载方法还包括以下步骤：

若对当前待加载图片进行图片解码，无法得到对应的图片像素数据的情况下，则对当前待加载图片的图片解码失败，并返回对应的第二信息，第二信息用于指示对当前待加载图片的图片解码失败。

S106：对图片像素数据进行图片渲染，将图片像素数据渲染至对应的网页展示位置和对应的宽高比例，得到渲染后的图片，并在网页端展示渲染后的图片。

可选的，将图片像素数据渲染至对应的网页展示位置和对应的宽高比例包括以下步骤：

根据当前加载图片对应的原图片像素数据在网页中的第一展示位置和第一展示位置对应的在网页中的展示范围对图片像素数据在网页中的第二展示位置进行调整，调整至使得第二展示位置在展示范围内、且第二展示位置与第一展示位置保持一致；以及

根据当前加载图片对应的原图片像素数据的第一图片宽高比例对图片像素数据的第二图片宽高比例进行调整，调整至第一图片宽高比例与第二图片宽高比例保持一致；这样，通过上述所示的渲染过程，就能够保证渲染后的图片在网页端正常展示，且在网页端的展示效果跟原图在网页端的展示效果保持一致。

可选的，本公开实施例提供的网页端的图片加载方法还包括以下步骤：

若对图片像素数据进行图片渲染，无法将图片像素数据渲染至对应的网页展示位置，则对图片像素数据的图片渲染失败，并返回对应的第三信息，第三信息用于指示将图片像素数据渲染至对应的网页展示位置失败；或者，

若对图片像素数据进行图片渲染，无法将图片像素数据渲染至对应的宽高比例，则对图片像素数据的图片渲染失败，并返回对应的第四信息，第四信息用于指示将图片像素数据渲染至对应的宽高比例失败；或者，

若对图片像素数据进行图片渲染，无法将图片像素数据渲染至对应的网页展示位置以及对应的宽高比例，则对图片像素数据的图片渲染失败，并返回对应的第五信息，第五信息用于指示将图片像素数据渲染至对应的网页展示位置以及对应的宽高比例失败。

如图2所示，示出了根据本发明实施例中具体应用场景中的网页端的图片加载方法的方法流程图。

如图2所示的网页端的图片加载方法的步骤如下所述：

步骤a1:异步下载用来加载代码的加载器包；

步骤a2:配置参数，开启监听过程。具体为：配置用于加载图片的各项参数，开启对原始图像标签状态的监听过程，并对监听结果进行标记，标记为对原始图像标签标记正确，或标记为对原始图像标签标记错误。

步骤a3:判断图片加载链接是否包含预设格式的后缀。在此步骤中，预设格式后缀可以为heic后缀，heic与传统的图片格式相比，它占用的内存更小，画质更加无损；但是，此种格式是无法在目前网页端浏览器正常显示的图片格式。在此，仅仅列举了一种预设格式后缀，还可以有其它无法在目前网页端浏览器正常显示的图片格式类型，在此，不再赘述。

步骤a4:若图片加载链接包含上述预设格式的任意一种后缀，则使用设定加载器加载图片；反之，若图片加载链接不包含上述预设格式的任意一种后缀，则对图像标签进行加载，进而加载图片成功，该加载图片可以在网页端正常展示。若图像标签加载错误，则使用设定加载器加载图片。

步骤a5:对加载的图片格式类型进行判断，若判断加载的图片格式类型为未知格式，则加载图片失败；若判断加载的图片格式类型为第一已知图片格式或者第二已知图片格式；例如，第一已知图片格式为HEIF高效率图档格式、第二已知图片格式为WebP。需要说明的是，HEIF高效率图档格式可以用更少的容量存储画质更好的照片，并且在连拍、动图和色彩变化不大的照片上效果尤其明显。WebP可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。

上述仅仅罗列了常见的两种预设图片解码器包能够解码的图片类型，还可以有其它网页端浏览器不支持的图片格式类型，在此不再赘述。

步骤a6:下载设定格式图片解码器包。

针对预设图片解码器包做如下说明：

预设图片解码器包能够解码的图片类型为多种网页端浏览器不支持的图片格式类型中的任意一种，在解码上述图片格式类型中的任意一种，得到对应的图片像素数据之后，使用图片渲染方法，将图片像素数据渲染至对应的网页展示位置和对应的宽高比例，得到渲染后的图片，并在网页端展示渲染后的图片；其中，预设图片解码器包采用C++代码编写，通过转换编译器转换成浏览器可执行代码。

步骤a7:通过上述设定格式图片解码器包解码图片并渲染；若图片解码和渲染均成功，则加载图片成功；若图片解码和渲染其中的任一发生错误，则加载图片失败。

本公开实施例提供一种网页端的图片加载方法，通过配置预设图片解码器包，该预设图片解码器包能够解码多种现有的网页端浏览器不支持的图片格式类型，并在对图片进行解码，得到对应的图片像素数据之后，对图片像素数据进行图片渲染；这样，实现了对现有网页端不支持的图片格式的正确解码和正确解码后的渲染，并能够在网页端展示渲染后的图片。

实施例2

本公开实施例承接实施例1，用于实现如实施例1所述的方法步骤，基于相同的名称含义的解释与实施例1相同，具有与实施例1相同的技术效果，此处不再赘述。结合附图3所示，根据本公开的具体实施方式，第二方面，本公开实施例提供一种业务处理装置，包括图片加载单元302、图片解码单元304、图片渲染单元306和图片展示单元308等，具体如下：

图片加载单元302，用于在当前待加载图片的图片加载链接中包含至少一种预设格式后缀的情况下，通过预设加载器对当前待加载图片进行图片加载；

图片解码单元304，用于在图片加载单元302加载的当前待加载图片的格式类型为预设图片解码器包能够解码的图片类型的情况下，对当前待加载图片进行图片解码，得到对应的图片像素数据；其中，预设图片解码器包能够解码的图片类型为多种网页端浏览器不支持的图片格式类型中的任意一种；

图片渲染单元306，用于对图片解码单元304解码的图片像素数据进行图片渲染，将图片像素数据渲染至对应的网页展示位置和对应的宽高比例，得到渲染后的图片；

图片展示单元308，用于在网页端展示图片渲染单元306渲染的渲染后的图片。

可选的，图片渲染单元306具体用于：

根据当前加载图片对应的原图片像素数据在网页中的第一展示位置和第一展示位置对应的在网页中的展示范围对图片像素数据在网页中的第二展示位置进行调整，调整至使得第二展示位置在展示范围内、且第二展示位置与第一展示位置保持一致；以及

根据当前加载图片对应的原图片像素数据的第一图片宽高比例对图片像素数据的第二图片宽高比例进行调整，调整至第一图片宽高比例与第二图片宽高比例保持一致。

可选的，所述装置还包括：

读取单元(在图3中未示出)，用于在图片渲染单元306对图片像素数据进行渲染之前，读取当前加载图片对应的原图片像素数据；其中，

读取单元读取出的原图片像素数据至少包括以下一项：

在网页中的第一展示位置、在网页中的展示范围、第一图片宽高比例。

可选的，所述装置还包括：

处理单元(在图3中未示出)，用于在当前待加载图片的格式类型不是预设图片解码器包能够解码的图片类型的情况下，对当前待加载图片的格式类型进行解码失败，并返回对应的第一信息，第一信息用于指示对当前待加载图片的格式类型进行解码失败。

可选的，处理单元还用于：

若对当前待加载图片进行图片解码，无法得到对应的图片像素数据的情况下，则对当前待加载图片的图片解码失败，并返回对应的第二信息，第二信息用于指示对当前待加载图片的图片解码失败。

可选的，处理单元还用于：

若对图片像素数据进行图片渲染，无法将图片像素数据渲染至对应的网页展示位置，则对图片像素数据的图片渲染失败，并返回对应的第三信息，第三信息用于指示将图片像素数据渲染至对应的网页展示位置失败；或者，

若对图片像素数据进行图片渲染，无法将图片像素数据渲染至对应的宽高比例，则对图片像素数据的图片渲染失败，并返回对应的第四信息，第四信息用于指示将图片像素数据渲染至对应的宽高比例失败；或者，

若对图片像素数据进行图片渲染，无法将图片像素数据渲染至对应的网页展示位置以及对应的宽高比例，则对图片像素数据的图片渲染失败，并返回对应的第五信息，第五信息用于指示将图片像素数据渲染至对应的网页展示位置以及对应的宽高比例失败。

可选的，在当前待加载图片的图片加载链接中包含至少一种预设格式后缀的情况下，图片加载单元302通过预设加载器对当前待加载图片进行图片加载之前，处理单元还用于：

异步下载用来加载代码的代码加载器包，配置用于加载图片的各项参数，开启对原始图像标签状态的监听过程，并对监听结果进行标记，标记为对原始图像标签标记正确，或标记为对原始图像标签标记错误。

本公开实施例提供一种网页端的图片加载装置，通过配置预设图片解码器包，该预设图片解码器包能够解码多种现有的网页端浏览器不支持的图片格式类型，并在图片解码单元对图片进行解码，得到对应的图片像素数据之后，图片渲染单元对图片像素数据进行图片渲染；这样，实现了对现有网页端不支持的图片格式的正确解码和正确解码后的渲染，并能够在网页端展示渲染后的图片。

实施例3

如图4所示，本实施例提供一种电子设备，该设备用于加载图片的网页端的图片加载方法，所述电子设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：通过配置预设图片解码器包，该预设图片解码器包能够解码多种现有的网页端浏览器不支持的图片格式类型，并在对图片进行解码，得到对应的图片像素数据之后，对图片像素数据进行图片渲染；这样，实现了对现有网页端不支持的图片格式的正确解码和正确解码后的渲染，并能够在网页端展示渲染后的图片。

实施例4

本公开实施例提供了一种非易失性计算机存储介质，所述计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的网页端的图片加载方法。

实施例5

下面参考图4，其示出了适于用来实现本公开实施例的电子设备的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图4所示，电子设备可以包括处理装置(例如中央处理器、图形处理器等)401，其可以根据存储在只读存储器(ROM)402中的程序或者从存储装置408加载到随机访问存储器(RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中，还存储有电子设备操作所需的各种程序和数据。处理装置401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。

通常，以下装置可以连接至I/O接口405：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置406；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置407；包括例如磁带、硬盘等的存储装置408；以及通信装置409。通信装置409可以允许电子设备与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的电子设备，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置409从网络上被下载和安装，或者从存储装置408被安装，或者从ROM 402被安装。在该计算机程序被处理装置401执行时，执行本公开实施例的方法中限定的上述功能。

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

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：通过配置预设图片解码器包，该预设图片解码器包能够解码多种现有的网页端浏览器不支持的图片格式类型，并在对图片进行解码，得到对应的图片像素数据之后，对图片像素数据进行图片渲染；这样，实现了对现有网页端不支持的图片格式的正确解码和正确解码后的渲染，并能够在网页端展示渲染后的图片。

或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：通过配置预设图片解码器包，该预设图片解码器包能够解码多种现有的网页端浏览器不支持的图片格式类型，并在对图片进行解码，得到对应的图片像素数据之后，对图片像素数据进行图片渲染；这样，实现了对现有网页端不支持的图片格式的正确解码和正确解码后的渲染，并能够在网页端展示渲染后的图片。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

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

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定。

Claims (10)

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

在当前待加载图片的图片加载链接中包含至少一种预设格式后缀的情况下，通过预设加载器对当前待加载图片进行图片加载；

在所述图片加载链接中不包含所述至少一种预设格式后缀的情况下，对当前待加载图片的图像标签进行加载，若所述图像标签加载错误，则通过所述预设加载器对当前待加载图片进行图片加载，所述图像标签的状态由在通过所述预设加载器对当前待加载图片进行图片加载之前异步下载的、用来加载代码的代码加载器包监听得到；

在当前待加载图片的格式类型为预设图片解码器包能够解码的图片类型的情况下，对当前待加载图片进行图片解码，得到对应的图片像素数据；其中，预设图片解码器包能够解码的图片类型为多种网页端浏览器不支持的图片格式类型中的任意一种；

对所述图片像素数据进行图片渲染，将所述图片像素数据渲染至对应的网页展示位置和对应的宽高比例，得到渲染后的图片，并在网页端展示所述渲染后的图片。

2.根据权利要求1所述的方法，其特征在于，所述将所述图片像素数据渲染至对应的网页展示位置和对应的宽高比例包括：

根据当前加载图片对应的原图片像素数据在网页中的第一展示位置和所述第一展示位置对应的在网页中的展示范围对所述图片像素数据在网页中的第二展示位置进行调整，调整至使得所述第二展示位置在所述展示范围内、且所述第二展示位置与所述第一展示位置保持一致；以及

根据当前加载图片对应的原图片像素数据的第一图片宽高比例对所述图片像素数据的第二图片宽高比例进行调整，调整至所述第一图片宽高比例与所述第二图片宽高比例保持一致。

3.根据权利要求2所述的方法，其特征在于，在所述对所述图片像素数据进行渲染之前，所述方法还包括：

读取当前加载图片对应的原图片像素数据；其中，

所述原图片像素数据至少包括以下一项：

在网页中的所述第一展示位置、在网页中的所述展示范围、所述第一图片宽高比例。

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

在当前待加载图片的格式类型不是所述预设图片解码器包能够解码的图片类型的情况下，对当前待加载图片的格式类型进行解码失败，并返回对应的第一信息，所述第一信息用于指示对当前待加载图片的格式类型进行解码失败。

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

若对当前待加载图片进行图片解码，无法得到对应的图片像素数据的情况下，则对当前待加载图片的图片解码失败，并返回对应的第二信息，所述第二信息用于指示对当前待加载图片的图片解码失败。

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

若对所述图片像素数据进行图片渲染，无法将所述图片像素数据渲染至对应的网页展示位置，则对所述图片像素数据的图片渲染失败，并返回对应的第三信息，所述第三信息用于指示将所述图片像素数据渲染至对应的网页展示位置失败；或者，

若对所述图片像素数据进行图片渲染，无法将所述图片像素数据渲染至对应的宽高比例，则对所述图片像素数据的图片渲染失败，并返回对应的第四信息，所述第四信息用于指示将所述图片像素数据渲染至对应的宽高比例失败；或者，

若对所述图片像素数据进行图片渲染，无法将所述图片像素数据渲染至对应的网页展示位置以及对应的宽高比例，则对所述图片像素数据的图片渲染失败，并返回对应的第五信息，所述第五信息用于指示将所述图片像素数据渲染至对应的网页展示位置以及对应的宽高比例失败。

7.根据权利要求1所述的方法，其特征在于，在所述在当前待加载图片的图片加载链接中包含至少一种预设格式后缀的情况下，通过预设加载器对当前待加载图片进行图片加载之前，所述方法还包括：

异步下载用来加载代码的代码加载器包，配置用于加载图片的各项参数，开启对原始图像标签状态的监听过程，并对监听结果进行标记，标记为对所述原始图像标签标记正确，或标记为对所述原始图像标签标记错误。

8.一种网页端的图片加载装置，其特征在于，包括：

图片加载单元，用于在当前待加载图片的图片加载链接中包含至少一种预设格式后缀的情况下，通过预设加载器对当前待加载图片进行图片加载；在所述图片加载链接中不包含所述至少一种预设格式后缀的情况下，对当前待加载图片的图像标签进行加载，若所述图像标签加载错误，则通过所述预设加载器对当前待加载图片进行图片加载，所述图像标签的状态由在通过所述预设加载器对当前待加载图片进行图片加载之前异步下载的、用来加载代码的代码加载器包监听得到；

图片解码单元，用于在所述图片加载单元加载的当前待加载图片的格式类型为预设图片解码器包能够解码的图片类型的情况下，对当前待加载图片进行图片解码，得到对应的图片像素数据；其中，预设图片解码器包能够解码的图片类型为多种网页端浏览器不支持的图片格式类型中的任意一种；

图片渲染单元，用于对所述图片解码单元解码的所述图片像素数据进行图片渲染，将所述图片像素数据渲染至对应的网页展示位置和对应的宽高比例，得到渲染后的图片；

图片展示单元，用于在网页端展示所述图片渲染单元渲染的所述渲染后的图片。

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

10.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1至7中任一项所述的方法。

Images