显示图像的方法、装置、设备和计算机可读介质与流程

1.本发明涉及计算机技术领域，尤其涉及一种显示图像的方法、装置、设备和计算机可读介质。


背景技术：

2.随着移动终端的发展，前端h5页面由于开发迭代速度快，也越来越受重视，前端页面的性能对用户体验有着决定性的作用。前端h5资源加载主要包括html、js、css、图像及api接口。
3.目前，网络中的图像仍然是占用流量较大的一部分，对于移动终端更是如此。如何在保证图像视觉不失真前提下缩小体积，对于节省带宽和电池电量十分重要。
4.在实现本发明过程中，发明人发现现有技术中至少存在如下问题：并非所有浏览器都能兼容不同格式，且通过修改前端代码方式处理繁琐。因此，存在图像格式兼容性差的技术问题。


技术实现要素：

5.有鉴于此，本发明实施例提供一种显示图像的方法、装置、设备和计算机可读介质，能够提高不同格式图像的兼容性。
6.为实现上述目的，根据本发明实施例的一个方面，提供了一种显示图像的方法，包括：
7.浏览器访问html页面，通过所述html页面，获知所述浏览器支持图像格式；
8.所述浏览器加载文件的情况下，所述支持图像格式是第一格式，所述浏览器接收第一格式图像链接，以在所述浏览器中显示第一格式图像，所述第一格式图像链接是预设链接；
9.所述支持图像格式是第二格式，所述浏览器接收所述第二格式图像链接，以在所述浏览器中显示第二格式图像，所述第二格式图像链接是以第二格式图像替换第一格式图像后得到的。
10.所述第一格式图像和所述第二格式图像是预设图像；
11.所述第一格式图像链接是获取所述第一格式图像的预设链接。
12.所述第一格式图像和所述二格式图像的图像名称一致；
13.所述第一格式图像、所述第二格式图像、所述第一格式图像链接和所述第二格式图像链接部署在服务端。
14.所述第一格式图像包括png格式图像；所述第二格式图像包括webp格式图像。
15.所述浏览器访问html页面，通过所述html页面，获知所述浏览器支持图像格式，包括：
16.所述浏览器访问html页面，加载所述html页面中第二格式图像数据；
17.依据所述第二格式图像数据的图像参数，获知所述浏览器支持图像格式。
18.所述依据所述第二格式图像数据的图像参数，获知所述浏览器支持图像格式，包括：
19.依据所述第二格式图像数据的图像参数，获知所述浏览器支持图像格式，并将所述支持图像格式存储在终端；
20.所述方法还包括：
21.从所述终端获取所述支持图像格式。
22.所述第二格式图像链接是采用全局字符串替换，以第二格式图像替换第一格式图像后得到的。
23.根据本发明实施例的第二方面，提供了一种显示图像的装置，包括：
24.格式模块，用于控制浏览器访问html页面，通过所述html页面，获知所述浏览器支持图像格式；
25.第一模块，用于所述浏览器加载文件的情况下，所述支持图像格式是第一格式，控制所述浏览器接收第一格式图像链接，以在所述浏览器中显示第一格式图像，所述第一格式图像链接是预设链接；
26.第二模块，用于所述支持图像格式是第二格式，控制所述浏览器接收所述第二格式图像链接，以在所述浏览器中显示第二格式图像，所述第二格式图像链接是以第二格式图像替换第一格式图像后得到的。
27.根据本发明实施例的第三方面，提供了一种显示图像的电子设备，包括：
28.一个或多个处理器；
29.存储装置，用于存储一个或多个程序，
30.当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述的方法。
31.根据本发明实施例的第四方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述的方法。
32.上述发明中的一个实施例具有如下优点或有益效果：浏览器访问html页面，通过所述html页面，获知所述浏览器支持图像格式；所述浏览器加载文件的情况下，所述支持图像格式是第一格式，所述浏览器接收第一格式图像链接，以在所述浏览器中显示第一格式图像，所述第一格式图像链接是预设链接；所述支持图像格式是第二格式，所述浏览器接收所述第二格式图像链接，以在所述浏览器中显示第二格式图像，所述第二格式图像链接是以第二格式图像替换第一格式图像后得到的。不仅能够显示第二格式图像，还可以显示第一格式图像，进而能够提高不同格式图像的兼容性。
33.上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
34.附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
35.图1是根据本发明实施例的显示图像的方法的主要流程示意图；
36.图2是根据本发明实施例的获知浏览器支持图像格式的流程示意图；
37.图3是根据本发明实施例的显示图像的应用场景交互示意图；
38.图4是根据本发明实施例的显示图像的装置的主要结构示意图；
39.图5是本发明实施例可以应用于其中的示例性系统架构图；
40.图6是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
41.以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
42.目前，前端项目中多使用png格式或webp格式，处理图像。
43.png是一种采用无损压缩算法的位图格式，在项目中使用png格式的图像是前端项目中主流做法。前端项目中的图像使用png格式，适用于绝大多数pc或移动终端浏览器。但是，相对于webp格式，png格式的图像还是存在容量大等缺点。在网页中大量采用png格式图像，会对页面性能造成很大的压力。
44.前端项目图像使用webp格式，对于不兼容webp格式的浏览器采用默认图像进行处理。
45.webp是一种同时提供了有损压缩与无损压缩的图片文件格式。webp格式虽然比png格式容量小，但是并非所有浏览器都能兼容，若在项目中只使用webp格式，在不兼容该格式的浏览器进行访问时，则不会显示图像。
46.虽然，可以在前端代码中针对特定的浏览器做代码兼容，达到支持webp格式的浏览器使用webp格式，不支持webp格式的浏览器则使用png格式。但是，由于使用图像的地方会比较多，如img标签、css背景等，处理会比较繁琐。
47.综上，并非所有浏览器都能兼容webp格式，且通过修改前端代码方式处理繁琐。因此，存在图像兼容性差的技术问题。
48.为了解决图像格式图像兼容性差的技术问题，可以采用以下本发明实施例中的技术方案。
49.参见图1，图1是根据本发明实施例的显示图像的方法主要流程示意图，采用不同格式图像链接，显示不同格式图像。如图1所示，具体包括以下步骤：
50.s101、浏览器访问html页面，通过html页面，获知浏览器支持图像格式。
51.在本发明实施例中，终端安装浏览器。其中，终端可以具体是移动终端，如：手机、平板电脑和个人电子设备等。浏览器中能够显示图像。浏览器中所显示的图像是预设图像。也就是说，上述图像是预先设置的图像。即，第一格式图像和第二格式图像是预设图像。
52.在本发明实施例中，第一格式图像和第二格式图像是标识两个不同格式的图像。作为一个示例，第一格式图像包括png格式图像，第二格式图像包括webp格式图像。作为另一个示例，第一格式图像包括webp格式图像，第二格式图像包括png格式图像。在下文中，以第一格式图像包括png格式图像，第二格式图像包括webp格式图像为例，进行示例性的说明。
53.下面就第一格式图像和第二格式图像的生成，进行示例地说明。
54.在前端编写代码阶段，图像需要同时生成第一格式和第二格式，两种格式图像放置于代码中。两种格式的图像名称保持一致。作为一个示例，两个格式图像的后缀名分别使用png和webp。image1.png和image1.webp。在获取图片时，需使用第一格式图像链接。其中，第一格式图像链接是获取第一格式图像的预设链接。
55.前端代码完成后，直接编译部署到服务器上。作为一个示例，服务器包括openresty服务器。openresty是一个基于nginx与lua的高性能web平台，其内部集成了大量精良的lua库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态web应用、web服务和动态网关。
56.可以理解的是，第一格式图像和二格式图像的图像名称一致，以便实现不同格式图像的替换。为了便于通过图像链接获取图像，第一格式图像、第二格式图像、第一格式图像链接和第二格式图像链接部署在服务端。如：第一格式图像、第二格式图像、第一格式图像链接和第二格式图像链接部署在openresty服务器。第二格式图像链接是获取第二格式图像的预设链接。在下文中说明第一格式图像链接和第二格式图像链接的关系。
57.在服务器中存储有第一格式图像和第二格式图像。为了确定浏览器所支持图像格式，浏览器需要访问html页面。即，浏览器访问html页面，通过html页面，获知浏览器支持图像格式。
58.参见图2，图2是根据本发明实施例的获知浏览器支持图像格式的流程示意图。具体包括以下步骤：
59.s201、浏览器访问html页面，加载html页面中第二格式图像数据。
60.为了获取浏览器支持图像格式，需要浏览器访问html页面，以加载html页面中第二格式图像数据。作为一个示例，使用openryresty的body_filter_by_lua，在html页面head顶部加入浏览器判断代码，以确定浏览器支持图像格式。
61.在具体实现时，通过加载html页面中的第二格式图像数据。作为一个示例，第二格式图像数据包括webp格式图片的base64数据。
62.s202、依据第二格式图像数据的图像参数，获知浏览器支持图像格式。
63.依据第二格式图像数据的图像参数，就能够获知浏览器支持图像格式。作为一个示例，第二格式图像数据的图像参数与预设图像参数一致，则浏览器支持第二格式；第二格式图像数据的图像参数与预设图像参数不同，则浏览器并不支持第二格式。如：图像参数包括webp格式图片长度和/或宽度。
64.在图2的实施例中，通过加载html页面中第二格式图像数据，进而获知浏览器支持图像格式。
65.s102、浏览器加载文件的情况下，支持图像格式是第一格式，浏览器接收第一格式图像链接，以在浏览器中显示第一格式图像，第一格式图像链接是预设链接。
66.浏览器加载文件以显示网页内容。作为一个示例，文件包括js文件和/或css文件。
67.在本发明的一个实施例中，依据第二格式图像数据的图像参数，获知浏览器支持图像格式，可以将支持图像格式存储在终端。进而，从终端获取支持图像格式。
68.作为一个示例，将支持图像格式存储在终端的cookie中。在加载文件的情况下，只需从cookie中获取支持图像格式。
69.支持图像格式是第一格式，即浏览器并不支持第二图像格式。那么，浏览器接收到
服务器发送的第一格式图像链接。浏览器通过第一格式图像链接，获取第一格式图像，从而在浏览器中显示第一格式图像。
70.需要说明的是，第一格式图像链接是获取第一格式图像的预设链接。第一格式图像链接设置在服务端中，通过第一格式图像链接，能够直接获取第一格式图像。
71.s103、支持图像格式是第二格式，浏览器接收第二格式图像链接，以在浏览器中显示第二格式图像，第二格式图像链接是以第二格式图像替换第一格式图像后得到的。
72.支持图像格式是第二格式，即浏览器支持第二图像格式。那么，浏览器接收到服务器发送的第二格式图像链接。浏览器通过第二格式图像链接，获取第二格式图像，从而在浏览器中显示第二格式图像。
73.可以理解的是，第二格式图像链接是获取第二格式图像的预设链接。第二格式图像链接设置在服务端中，通过第二格式图像链接，能够直接获取第二格式图像。
74.需要说明的是，第二格式图像链接是以第二格式图像替换第一格式图像后得到的。在本发明的一个实施例中，第二格式图像链接是采用全局字符串替换，以第二格式图像替换第一格式图像后得到的。
75.具体来说，第一格式图像链接设置在服务端中，通过第一格式图像链接，能够直接获取第一格式图像。为了获取第二图像，需要在第一格式图像链接的基础上建立第二格式链接。采用全局字符串，将第一格式图像链接中的第一格式图像替换为第二格式图像。替换后的第一格式链接作为第二格式链接。也就是说，第一格式链接与第二格式链接中的格式图像不同。第一格式链接涉及第一格式图像；第二格式链接涉及第二格式图像。
76.在上述本发明的实施例中，浏览器访问html页面，通过所述html页面，获知所述浏览器支持图像格式；所述浏览器加载文件的情况下，所述支持图像格式是第一格式，所述浏览器接收第一格式图像链接，以在所述浏览器中显示第一格式图像，所述第一格式图像链接是预设链接；所述支持图像格式是第二格式，所述浏览器接收所述第二格式图像链接，以在所述浏览器中显示第二格式图像，所述第二格式图像链接是以第二格式图像替换第一格式图像后得到的。不仅能够显示第二格式图像，还可以显示第一格式图像，进而能够提高不同格式图像的兼容性。
77.针对于浏览器支持图像格式是第一格式，则直接显示第一格式图像；针对浏览器支持图像格式第二格式，在第一格式图像链接中，以第二格式图像替换第一格式图像，进而得到第二格式图像链接以显示第二格式图像。采用本发明实施例，支持浏览器显示不同格式图像，因此能够提高不同格式图像的兼容性。
78.参见图3，图3是根据本发明实施例的显示图像的应用场景交互示意图。图3中包括三个执行主体，分别为：浏览器，服务器和执行脚本。浏览器用于显示图像。服务器中存储有多种格式图像和图像链接。执行脚本用于处理浏览器的请求。
79.s301、访问html网页。
80.浏览器向服务器发送访问html网页的请求。
81.s302、加载html网页。
82.为了获知浏览器支持图像格式，浏览器访问html页面，并加载html网页。
83.s303、获知浏览器支持格式。
84.通过加载的html页面，获知浏览器支持格式。作为一个示例，加载html页面中第二
格式图像数据，得到第二格式图像数据的图像参数。第二格式图像数据的图像参数与预设图像参数一致，则浏览器支持第二格式；第二格式图像数据的图像参数与预设图像参数不同，则浏览器并不支持第二格式。
85.s304、加载文件。
86.浏览器加载文件以显示网页内容。
87.s305、基于浏览器支持格式反馈链接。
88.网页内容中涉及图像，为了在浏览器中显示图像，服务器需要向浏览器反馈链接。
89.对于浏览器支持图像格式是第一格式，则直接反馈第一格式图像链接，以显示第一格式图像；对于浏览器支持图像格式是第二格式，则在第一图像链接中以第二格式图像替换第一格式图像，将第二格式图像替换后的链接作为第二图像连接。反馈第二格式图像链接，以显示第二格式图像。
90.s306、显示图像。
91.浏览器基于图像链路获取对应格式图像，以显示图像。对于浏览器来说，能够显示所支持格式的图像。
92.参见图4，图4是根据本发明实施例的显示图像的装置的主要结构示意图，显示图像的装置可以实现显示图像的方法，如图4所示，显示图像的装置具体包括：
93.格式模块401，用于控制浏览器访问html页面，通过所述html页面，获知所述浏览器支持图像格式；
94.第一模块402，用于所述浏览器加载文件的情况下，所述支持图像格式是第一格式，控制所述浏览器接收第一格式图像链接，以在所述浏览器中显示第一格式图像，所述第一格式图像链接是预设链接；
95.第二模块403，用于所述支持图像格式是第二格式，控制所述浏览器接收所述第二格式图像链接，以在所述浏览器中显示第二格式图像，所述第二格式图像链接是以第二格式图像替换第一格式图像后得到的。
96.在本发明的一个实施例中，所述第一格式图像和所述第二格式图像是预设图像；
97.所述第一格式图像链接是获取所述第一格式图像的预设链接。
98.在本发明的一个实施例中，
99.所述第一格式图像和所述二格式图像的图像名称一致；
100.所述第一格式图像、所述第二格式图像、所述第一格式图像链接和所述第二格式图像链接部署在服务端。
101.在本发明的一个实施例中，所述第一格式图像包括png格式图像；所述第二格式图像包括webp格式图像。
102.在本发明的一个实施例中，格式模块401，具体用于所述浏览器访问html页面，加载所述html页面中第二格式图像数据；
103.依据所述第二格式图像数据的图像参数，获知所述浏览器支持图像格式。
104.在本发明的一个实施例中，格式模块401，具体用于依据所述第二格式图像数据的图像参数，获知所述浏览器支持图像格式，并将所述支持图像格式存储在终端；
105.第一模块402，还用于从所述终端获取所述支持图像格式；
106.或，
107.第二模块403，还用于从所述终端获取所述支持图像格式；
108.在本发明的一个实施例中，所述第二格式图像链接是采用全局字符串替换，以第二格式图像替换第一格式图像后得到的。
109.图5示出了可以应用本发明实施例的显示图像的方法或显示图像的装置的示例性系统架构500。
110.如图5所示，系统架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
111.用户可以使用终端设备501、502、503通过网络504与服务器505交互，以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。
112.终端设备501、502、503可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
113.服务器505可以是提供各种服务的服务器，例如对用户利用终端设备501、502、503所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息
‑‑
仅为示例)反馈给终端设备。
114.需要说明的是，本发明实施例所提供的显示图像的方法一般由服务器505执行，相应地，显示图像的装置一般设置于服务器505中。
115.应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
116.下面参考图6，其示出了适于用来实现本发明实施例的终端设备的计算机系统600的结构示意图。图6示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
117.如图6所示，计算机系统600包括中央处理单元(cpu)601，其可以根据存储在只读存储器(rom)602中的程序或者从存储部分608加载到随机访问存储器(ram)603中的程序而执行各种适当的动作和处理。在ram 603中，还存储有系统600操作所需的各种程序和数据。cpu 601、rom 602以及ram 603通过总线604彼此相连。输入/输出(i/o)接口605也连接至总线604。
118.以下部件连接至i/o接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至i/o接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。
119.特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可
拆卸介质611被安装。在该计算机程序被中央处理单元(cpu)601执行时，执行本发明的系统中限定的上述功能。
120.需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。
121.附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
122.描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括格式模块、第一模块和第二模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，格式模块还可以被描述为“用于控制浏览器访问html页面，通过所述html页面，获知所述浏览器支持图像格式”。
123.作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：
124.浏览器访问html页面，通过所述html页面，获知所述浏览器支持图像格式；
125.所述浏览器加载文件的情况下，所述支持图像格式是第一格式，所述浏览器接收第一格式图像链接，以在所述浏览器中显示第一格式图像，所述第一格式图像链接是预设链接；
126.所述支持图像格式是第二格式，所述浏览器接收所述第二格式图像链接，以在所述浏览器中显示第二格式图像，所述第二格式图像链接是以第二格式图像替换第一格式图像后得到的。
127.根据本发明实施例的技术方案，浏览器访问html页面，通过所述html页面，获知所述浏览器支持图像格式；所述浏览器加载文件的情况下，所述支持图像格式是第一格式，所述浏览器接收第一格式图像链接，以在所述浏览器中显示第一格式图像，所述第一格式图像链接是预设链接；所述支持图像格式是第二格式，所述浏览器接收所述第二格式图像链接，以在所述浏览器中显示第二格式图像，所述第二格式图像链接是以第二格式图像替换第一格式图像后得到的。不仅能够显示第二格式图像，还可以显示第一格式图像，进而能够提高不同格式图像的兼容性。
128.上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。