CN106557537B - 网页图片标签显示方法和装置 - Google Patents

Abstract

本发明涉及一种网页图片标签显示方法，包括：获取待加载网页的网页元素标签；查找获取的网页元素标签中的图片标签；获取查找的图片标签中指向的图片的尺寸数据；获取图片标签元素对应的父标签中设定的图片的显示空间数据；通过尺寸数据和显示空间数据的对比，等比例放大或者缩小图片的各维度的尺寸数据，以使调整后的各维度尺寸数据均不大于显示空间数据；在网页中显示调整后的图片，上述方法能够使显示的图片不失真其不会影响网页的整体布局。

Description

网页图片标签显示方法和装置

技术领域

本发明涉及网页设计技术领域，特别是涉及一种网页图片标签显示方法和装置。

背景技术

网页是用HTML语言编写，通过WWW传播，并被WEB浏览器翻译成为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为一体的网页文件，是网站的基本单位，WWW的基本文档。

通过HTML语言定义网页中待显示的各种元素标签，并按照各元素标签对各元素的定义进行网页元素显示。对于网页中图片的显示，传统技术中的网页只适应设定大小的图片的显示，当引用的图片大小与网页显示所设定的图片大小不相同时，将会出现显示的图片失真问题或者图片不正常显示导致网页显示混乱的问题。

发明内容

基于此，有必要针对上述问题，提供一种能够使显示的图片不失真且不会影响网页的整体布局的网页图片标签显示方法和装置。

一种网页图片标签显示方法，所述方法包括：

获取待加载网页的网页元素标签；

查找获取的所述网页元素标签中的图片标签；

获取查找的所述图片标签所指向的图片的尺寸数据；

获取所述图片标签对应的父标签中设定的显示空间数据；

通过所述尺寸数据和所述显示空间数据的对比，等比例放大或者缩小所述图片的各维度尺寸数据，以使调整后的所述各维度尺寸数据均不大于所述显示空间数据；

在网页中显示调整后的所述图片。

在一个实施例中，所述图片的尺寸数据包括图片高度数值和图片宽度数值，所述显示空间数据包括显示高度数值和显示宽度数值；

所述通过所述尺寸数据和所述显示空间数据的对比，等比例放大或者缩小所述图片的各维度的尺寸数据，以使调整后的所述各维度尺寸数据均不大于所述显示空间数据的步骤包括：

计算所述图片高度数值与所述图片宽度数值的第一比值以及所述显示高度数值与所述显示宽度数值的第二比值；

当所述第一比值不小于所述第二比值时，调整所述图片高度数值为所述显示高度数值，并获取所述图片高度数值的调整比例，按照所述调整比例调整所述图片宽度数值；

当所述第一比值小于所述第二比值时，调整所述图片宽度数值为所述显示宽度数值，并获取所述图片宽度数值的调整比例，按照所述调整比例调整所述图片高度数值。

在一个实施例中，所述图片标签中包括图片显示方式信息，所述图片的显示方式包括居中显示、靠左显示、靠右显示、靠上显示和靠下显示；

所述在网页中显示调整后的所述图片的步骤为：按照所述图片显示方式信息对应的显示方式在网页中进行调整后的所述图片的显示。

在一个实施例中，所述图片为圆形图片，所述图片尺寸数据为图片半径数值，所述显示空间数据包括显示高度数值和显示宽度数值；

所述通过所述尺寸数据和所述显示空间数据的对比，等比例放大或者缩小所述图片的各维度的尺寸数据，以使调整后的所述各维度尺寸数据均不大于所述显示空间数据的步骤包括：

获取所述显示空间数据中最小的维度尺寸数值；

放大或者缩小所述图片的半径数值为所述最小的维度尺寸数值的一半。

在一个实施例中，所述在网页中显示调整后的所述图片的步骤之后，还包括：

获取用户对显示的所述图片的局部区域的框选操作；

等比例放大所述局部区域，以使所述局部区域显示在所述显示空间数据对应的网页显示空间。

一种网页图片标签显示装置，所述装置包括：

页面元素标签获取模块，用于获取待加载网页的网页元素标签；

图片标签查找模块，用于查找获取的所述网页元素标签中的图片标签；

图片尺寸数据获取模块，用于获取查找的所述图片标签所指向的图片的尺寸数据；

显示空间数据获取模块，用于获取所述图片标签对应的父标签中设定的显示空间数据；

图片尺寸调整模块，用于通过所述尺寸数据和所述显示空间数据的对比，等比例放大或者缩小所述图片的各维度的尺寸数据，以使调整后的所述各维度尺寸数据均不大于所述显示空间数据；

图片显示模块，用于在网页中显示调整后的所述图片。

在一个实施例中，所述图片的尺寸数据包括图片高度数值和图片宽度数值，所述显示空间数据包括显示高度数值和显示宽度数值；

所述图片尺寸调整模块，还用于计算所述图片高度数值与所述图片宽度数值的第一比值以及所述显示高度数值与所述显示宽度数值的第二比值；

当所述第一比值不小于所述第二比值时，调整所述图片高度数值为所述显示高度数值，并获取所述图片高度数值的调整比例，按照所述调整比例调整所述图片宽度数值；

当所述第一比值小于所述第二比值时，调整所述图片宽度数值为所述显示宽度数值，并获取所述图片宽度数值的调整比例，按照所述调整比例调整所述图片高度数值。

在一个实施例中，所述图片标签中包括图片显示方式信息，所述图片的显示方式包括居中显示、靠左显示、靠右显示、靠上显示和靠下显示；

所述图片显示模块还用于按照所述图片显示方式信息对应的显示方式在网页中进行调整后的所述图片的显示。

在一个实施例中，所述图片为圆形图片，所述图片尺寸数据为图片半径数值，所述显示空间数据包括显示高度数值和显示宽度数值；

所述图片尺寸调整模块，还用于获取所述显示空间数据中最小的维度尺寸数值；放大或者缩小所述图片的半径数值为所述最小的维度尺寸数值的一半。

在一个实施例中，所述装置还包括：

框选模块，用于获取用户对显示的所述图片的局部区域的框选操作；

局部放大模块，用于等比例放大所述局部区域，以使所述局部区域显示在所述显示空间数据对应的网页显示空间。

上述网页图片标签显示方法和装置，网页进行网页元素显示时，获取要显示的网页元素标签，并查找网页元素标签中的图片标签，进而获取图片的尺寸数据，将该尺寸数据与网页设计中为该图片标签设定的显示空间数据进行对比，根据显示空间数据等比例调整图片的尺寸数据以使图片能够显示在显示空间内。由于图片进行的是等比例缩放调整，因此，图片不会失真，有效确保了图片的显示效果；另外，调整图片至其能够显示在设定的显示空间内，不会影响网页的整体布局。

附图说明

图1为一个实施例中网页图片标签显示方法的应用环境图；

图2为一个实施例中网页图片标签显示方法的流程图；

图3为另一个实施例中网页图片标签显示方法的原理图；

图4为一个实施例中网页页面中显示的图片的示意图；

图5为另一个实施例中网页页面中显示的图片的示意图；

图6为一个实施例中网页图片标签显示装置的结构框图；

图7为另一个实施例中网页图片标签显示装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，在一个实施例中，提供了一种网页图片标签显示方法运行的应用环境图。该应用环境包括终端110和网络服务器120，其中，终端110和网络服务器120通过网络进行通信，终端110向网络服务器120发送网页访问请求，网络服务器120根据终端110发送的网页访问请求，返回HTML文档，终端110根据该HTML文档进行网页内容数据的调取和显示。其中，终端可以为智能手机、平板电脑、笔记本电脑和台式计算机中的至少一种，但并局限于此。

在一个实施例中，如图2所示，提供了一种网页图片标签显示方法，该方法以应用在如图1所示的终端中为例进行说明，包括如下步骤：

步骤S202：获取待加载网页的网页元素标签。

步骤S204：查找获取的网页元素标签中的图片标签。

终端中安装有网络浏览器或者能够显示网页的其他应用，以下以网络浏览器中网页的显示为例进行说明。终端中的网络浏览器获取用户触发生成的网页访问请求，服务器接收终端发送的网页访问请求，并提取该网页访问请求中携带的待访问的网页标识，服务器根据该网页标识查找对应的HTML(Hyper Text Mark-up Language，超文本标记语言)文档，并将该HTML文档返回给请求终端。

HTML文档中包括该网页中的网页元素标签，如标题标签、图片标签、表格标签等。每个网页元素标签具有自己特定的标签符号，如标题标签的标签符号为<title>、图片标签的标签符号为<img>、表格标签的标签符号为<table>。

终端根据HTML文档中各网页元素标签的标签符号，查找图片img标签。

步骤S206：获取查找的图片标签所指向的图片的尺寸数据。

具体的，图片img标签包括src属性，src属性值指向图片文件位置URL(统一资源定位符，Uniform/Universal Resource Locator)。终端可通过图片文件位置URL获取服务器中存储的与该定位符对应的图片。

终端根据src属性指示的图片文件位置URL向服务器发送图片获取请求，该图片获取请求为一个HTTP(HyperText Transfer Protocol，超文本传输协议)请求。服务器根据终端发送的图片获取请求，查找与获取请求中指示的图片文件位置URL对应的图片数据，并将查找的图片数据传输至请求终端。其中，图片数据包括构成图片的各像素点数据以及图片的尺寸数据。

步骤S208：获取图片标签对应的父标签中设定的显示空间数据。

具体的，图片标签的父标签是指包裹在图片标签之外的第一个标签，父标签中定义了图片在网页中的显示尺寸，即显示空间数据。父标签中定义的图片的显示空间数据是根据实际的网页显示需求预先设定，即图片需要显示多大就设定多大。

步骤S210：通过尺寸数据和显示空间数据的对比，等比例放大或者缩小图片的各维度的尺寸数据，以使调整后的各维度尺寸数据均不大于显示空间数据。

步骤S212：在网页中显示调整后的所述图片。

将获取的图片的尺寸数据与显示空间数据进行对比，根据对比结果小进行图片的等比例放大或者等比例缩小，直至图片的尺寸数据完全落入显示空间数据的范围内，也就是通过等比例缩放图片各维度尺寸数据，使图片能够显示在显示空间数据对应的显示空间内。

例如，通过对比，图片的尺寸数据中的宽度数据大于显示空间数据的显示宽度数据，则缩小图片的宽度数据，使其不大于显示宽度数据，与此同时按照宽度维度的缩小比例，缩小图片其他维度数据。

本实施例中，在网页进行网页元素显示时，获取要显示的网页元素标签，并查找网页元素标签中的图片标签，进而获取图片的尺寸数据，将该尺寸数据与网页设计中为该图片标签设定的显示空间数据进行对比，根据显示空间数据等比例调整图片的尺寸数据以使图片能够显示在显示空间内。由于图片进行的是等比例缩放调整，因此，图片不会失真，有效确保了图片的显示效果；另外，调整图片至其能够显示在设定的显示空间内，不会影响网页的整体布局。

在一个实施例中，图片的尺寸数据包括图片高度数值和图片宽度数值，显示空间数据包括显示高度数值和显示宽度数值，即图片为矩形图片。

步骤S210：通过尺寸数据和显示空间数据的对比，等比例放大或者缩小图片的各维度的尺寸数据，以使调整后的各维度尺寸数据均不大于显示空间数据的步骤包括：

计算图片高度数值与图片宽度数值的第一比值以及显示高度数值与显示宽度数值的第二比值；当第一比值不小于第二比值时，调整图片高度数值为显示高度数值，并获取图片高度数值的调整比例，按照调整比例调整图片宽度数值；当第一比值小于第二比值时，调整图片宽度数值为显示宽度数值，并获取图片宽度数值的调整比例，按照调整比例调整图片高度数值。

具体的，如图3所示，图片高度数值为hs，图片宽度数值为ws，显示高度数值为hp，显示宽度数值为wp，因此，第一比值a＝hs/ws，第二比值b＝hp/wp。

当a>b时，调整图片高度数值hs，使hs′＝hp，此时，图片高度的缩放比例为hp/hs，将图片宽度数值做同样比例的缩放即ws′＝ws·hp/hs＝hp/a，如图4所示。

当a<b时，调整图片宽度数值ws，使ws′＝wp，此时，图片宽度的缩放比例为wp/ws，将图片高度数值做同样比例的缩放，即hs′＝hswp/ws＝wp·a，如图5所示。

当a＝b，可按照上述的两者方法的任一种调整方法进行调整，调整后的结果为ws′＝wp，hs′＝hp。

本实施例中，调整图片的大小，使图片的其中一个维度与显示空间数据对应的维度数据相等，实现了在满足图片能够显示在显示空间中的前提下，图片显示尺寸的最大化，既保证了显示的图片不失真，同时使显示的图片更大更清晰。

在一个实施例中，图片标签中还包括图片显示方式信息，图片的显示方式包括居中显示、靠左显示、靠右显示、靠上显示和靠下显示。

本实施例中，步骤S212：在网页中显示调整后的图片的步骤为：按照图片显示方式信息对应的显示方式在网页中进行调整后的图片的显示。

以矩形图片为例，当调整后的图片的宽度数值等于显示宽度数值，调整后的图片的高度数值小于显示高度数值时，图片的居中显示方式为上下居中，如图5所示。当调整后的图片高度数值等于显示高度数值，调整后的图片的宽度数值小于显示宽度数值时，图片的居中显示方式为左右居中，如图4所示。

在一个实施例中，图片为圆形图片，图片尺寸数据为图片半径数值，显示空间数据包括显示高度数值和显示宽度数值。

步骤S210：通过尺寸数据和显示空间数据的对比，等比例放大或者缩小图片的各维度的尺寸数据，以使调整后的各维度尺寸数据均不大于显示空间数据包括：获取显示空间数据中最小的维度尺寸数值；放大或者缩小图片的半径数值为最小的维度尺寸数值的一半。

具体的，比较显示宽度数值和显示高度数值，确定两者中最小的数值，当显示宽度数值小于显示高度数值时，放大或者缩小图片半径数值使该图片半径数值等于显示宽度数值的一半；当显示宽度数值大于显示高度数值时，放大或者缩小图片半径数值，使该图片半径数值等于显示高度数值的一半。即，使图片在网页的图片显示空间中且至少与一个空间维度相切。

本实施例中，当图片为圆形图片时，也可根据显示空间数据进行图片尺寸的调整，在保证了显示的图片不失真的同时使显示的图片更大更清晰。

在一个实施例中，当图片的长高比较大时且需要进行较大比例的收缩时，显示的图片很可能看不清，为此，本实施例中，在步骤S212：在网页中显示调整后的图片之后，还包括：获取用户对显示的图片的局部区域的框选操作；等比例放大或者缩小框选操作选择的图片的局部区域，以使局部区域显示在显示空间数据对应的网页显示空间。

具体的，获取用户作用于显示的图片中的框选操作，该框选操作可以是通过人手的滑动轨迹确定框选操作的框选范围，也可以通过设定形状的框选框进行框选。在一个实施例中，通过触摸操作或者鼠标的点击操作，可进行框选方式的选择，如矩形框选、圆形/椭圆形框选或不定形状框选，然后，通过移动鼠标或者滑动触摸操作，按照选择的框选方式进行图片的框选。

终端将根据用户的框选操作生成第二图像，该生成的第二图像为显示的图片的局部区域，等比例放大第二图像，以使第二图像显示在网页显示空间内。

具体的第二图像的显示方式为：在满足图片能够显示在显示空间中的前提下，使第二图像的显示尺寸的最大化。

本实施例中，用户可选择自己关注的部分或者图片中内容显示不清楚部分并进行该部分图像的放大，图片的显示更加灵活。

在一个实施例中，如图6所示，提供了一种网页图片标签显示装置，该装置包括：

页面元素标签获取模块302，用于获取待加载网页的网页元素标签。

图片标签查找模块304，用于查找获取的网页元素标签中的图片标签。

图片尺寸数据获取模块306，用于获取查找的图片标签所指向的图片的尺寸数据。

显示空间数据获取模块308，用于获取图片标签对应的父标签中设定的显示空间数据。

图片尺寸调整模块310，用于通过尺寸数据和显示空间数据的对比，等比例放大或者缩小图片的各维度的尺寸数据，以使调整后的各维度尺寸数据均不大于显示空间数据。

图片显示模块312，用于在网页中显示调整后的图片。

在一个实施例中，图片的尺寸数据包括图片高度数值和图片宽度数值，显示空间数据包括显示高度数值和显示宽度数值；

图片尺寸调整模块310，还用于计算图片高度数值与图片宽度数值的第一比值以及显示高度数值与显示宽度数值的第二比值；当第一比值不小于第二比值时，调整图片高度数值为显示高度数值，并获取图片高度数值的调整比例，按照调整比例调整图片宽度数值；

当第一比值小于第二比值时，调整图片宽度数值为显示宽度数值，并获取图片宽度数值的调整比例，按照调整比例调整图片高度数值。

在一个实施例中，图片标签中还包括图片显示方式信息，图片的显示方式包括居中显示、靠左显示、靠右显示、靠上显示和靠下显示。

图片显示模块312还用于按照图片显示方式信息对应的显示方式在网页中进行调整后的图片的显示。

在一个实施例中，图片为圆形图片，图片尺寸数据为图片半径数值，显示空间数据包括显示高度数值和显示宽度数值；

图片尺寸调整模块310，还用于获取显示空间数据中最小的维度尺寸数值；放大或者缩小图片的半径数值为最小的维度尺寸数值的一半。

在一个实施例中，如图7所示，网页图片标签显示装置还包括：

框选模块402，用于获取用户对显示的图片的局部区域的框选操作。

局部放大模块404，用于等比例放大框选操作选择的图片的局部区域，以使局部区域显示在显示空间数据对应的网页显示空间。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，程序可存储于一计算机可读取存储介质中，如本发明实施例中，该程序可存储于计算机系统的存储介质中，并被该计算机系统中的至少一个处理器执行，以实现包括如上述各方法的实施例的流程。其中，存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种网页图片标签显示方法，所述方法包括：

获取待加载网页的网页元素标签；

查找获取的所述网页元素标签中的图片标签；

获取查找的所述图片标签所指向的图片的尺寸数据；

获取所述图片标签对应的父标签中设定的显示空间数据；

通过所述尺寸数据和所述显示空间数据的对比，等比例放大或者缩小所述图片的各维度尺寸数据，以使调整后的所述各维度尺寸数据均不大于所述显示空间数据；

在网页中显示调整后的所述图片；所述图片标签中包括图片显示方式信息，所述图片的显示方式包括居中显示、靠左显示、靠右显示、靠上显示和靠下显示；

获取用户对显示的所述图片的局部区域的框选操作；

等比例放大所述局部区域，以使所述局部区域显示在所述显示空间数据对应的网页显示空间；

所述图片为圆形图片，所述图片尺寸数据为图片半径数值，所述显示空间数据包括显示高度数值和显示宽度数值；

所述通过所述尺寸数据和所述显示空间数据的对比，等比例放大或者缩小所述图片的各维度尺寸数据，以使调整后的所述各维度尺寸数据均不大于所述显示空间数据的步骤包括：

获取所述显示空间数据中最小的维度尺寸数值；

放大或者缩小所述图片的半径数值为所述最小的维度尺寸数值的一半。

2.根据权利要求1所述的方法，其特征在于，所述图片的尺寸数据包括图片高度数值和图片宽度数值，所述显示空间数据包括显示高度数值和显示宽度数值；

所述通过所述尺寸数据和所述显示空间数据的对比，等比例放大或者缩小所述图片的各维度的尺寸数据，以使调整后的所述各维度尺寸数据均不大于所述显示空间数据的步骤包括：

计算所述图片高度数值与所述图片宽度数值的第一比值以及所述显示高度数值与所述显示宽度数值的第二比值；

当所述第一比值不小于所述第二比值时，调整所述图片高度数值为所述显示高度数值，并获取所述图片高度数值的调整比例，按照所述调整比例调整所述图片宽度数值；

当所述第一比值小于所述第二比值时，调整所述图片宽度数值为所述显示宽度数值，并获取所述图片宽度数值的调整比例，按照所述调整比例调整所述图片高度数值。

3.根据权利要求1或2所述的方法，其特征在于，所述在网页中显示调整后的所述图片的步骤为：按照所述图片显示方式信息对应的显示方式在网页中进行调整后的所述图片的显示。

4.根据权利要求1所述的方法，其特征在于，所述框选操作包括通过人手的滑动轨迹确定框选操作的框选范围或者通过设定形状的框选框进行框选。

5.根据权利要求4所述的方法，其特征在于，所述通过设定形状的框选框进行框选包括：矩形框选、圆形/椭圆形框选或不定形状框选。

6.一种网页图片标签显示装置，其特征在于，所述装置包括：

页面元素标签获取模块，用于获取待加载网页的网页元素标签；

图片标签查找模块，用于查找获取的所述网页元素标签中的图片标签；

图片尺寸数据获取模块，用于获取查找的所述图片标签所指向的图片的尺寸数据；

显示空间数据获取模块，用于获取所述图片标签对应的父标签中设定的显示空间数据；

图片尺寸调整模块，用于通过所述尺寸数据和所述显示空间数据的对比，等比例放大或者缩小所述图片的各维度的尺寸数据，以使调整后的所述各维度尺寸数据均不大于所述显示空间数据；

图片显示模块，用于在网页中显示调整后的所述图片；所述图片标签中包括图片显示方式信息，所述图片的显示方式包括居中显示、靠左显示、靠右显示、靠上显示和靠下显示；

框选模块，用于获取用户对显示的所述图片的局部区域的框选操作；

局部放大模块，用于等比例放大所述局部区域，以使所述局部区域显示在所述显示空间数据对应的网页显示空间；

所述图片为圆形图片，所述图片尺寸数据为图片半径数值，所述显示空间数据包括显示高度数值和显示宽度数值；

所述图片尺寸调整模块，还用于获取所述显示空间数据中最小的维度尺寸数值；放大或者缩小所述图片的半径数值为所述最小的维度尺寸数值的一半。

7.根据权利要求6所述的装置，其特征在于，所述图片的尺寸数据包括图片高度数值和图片宽度数值，所述显示空间数据包括显示高度数值和显示宽度数值；

所述图片尺寸调整模块，还用于计算所述图片高度数值与所述图片宽度数值的第一比值以及所述显示高度数值与所述显示宽度数值的第二比值；

当所述第一比值不小于所述第二比值时，调整所述图片高度数值为所述显示高度数值，并获取所述图片高度数值的调整比例，按照所述调整比例调整所述图片宽度数值；

当所述第一比值小于所述第二比值时，调整所述图片宽度数值为所述显示宽度数值，并获取所述图片宽度数值的调整比例，按照所述调整比例调整所述图片高度数值。

8.根据权利要求6或7所述的装置，其特征在于，所述图片显示模块还用于按照所述图片显示方式信息对应的显示方式在网页中进行调整后的所述图片的显示。

9.根据权利要求6所述的装置，其特征在于，所述框选操作包括通过人手的滑动轨迹确定框选操作的框选范围或者通过设定形状的框选框进行框选。

10.根据权利要求9所述的装置，其特征在于，所述通过设定形状的框选框进行框选包括：矩形框选、圆形/椭圆形框选或不定形状框选。

Images