CN103208128B - 显示图片的方法及装置 - Google Patents

Abstract

本发明公开了一种显示图片的方法及装置，属于计算机技术领域。所述方法包括：解析图片原始数据的头信息，从解析得到的头信息中获取所述图片的宽高信息；根据所述图片的宽高信息对所述图片的标签进行网页排版；获取所述图片的图片对象，并在所述标签的排版位置绘制所述图片对象。所述装置包括：第一获取模块、排版模块、第二获取模块和绘制模块。本发明通过解析图片原始数据的头信息来获取图片宽高信息，避免了通过创建图片对象来获取图片宽高信息时占用过多内存的问题，进而提升显示图片的性能；另外，在标签排版位置不在显示区域时，通过删除已经创建的图片对象，从而减少图片对象占用的内存，进一步提升显示图片的性能。

Description

显示图片的方法及装置

技术领域

本发明涉及计算机技术领域，特别涉及一种显示图片的方法及装置。

背景技术

手机终端，尤其是低端的Java手机终端中应用程序可使用的内存非常有限，而图片是消耗内存的主要因素。因此，在显示图片过程中，如何减少图片在显示过程中所占用的内存，就显得非常重要。

现有技术在显示图片时，首先通过创建图片对象获取图片标签排版所需的宽高信息，并在获取完宽高信息后释放该图片对象，并根据获取到的宽高信息对标签进行网页排版，然后获取图片对象，在标签所在的排版位置绘制图片对象，完成对图片的显示。

在实现本发明的过程中，发明人发现现有技术至少存在以下缺点：

在获取图片的宽高信息时，现有技术使用创建图片对象的方式会占用大量内存，虽然获取完宽高信息后释放了图片对象，但释放后的内存并不会立刻被虚拟机回收，导致内存峰值较大，造成内存不足，从而影响显示图片的性能。

发明内容

为了在减少图片占用内存的同时，提升显示图片的性能，本发明实施例提供了一种显示图片的方法及装置。所述技术方案如下：

一方面，提供了一种显示图片的方法，所述方法包括：

在网页排版的过程中，解析图片原始数据的头信息，从解析得到的头信息中获取所述图片的宽高信息；

根据所述图片的宽高信息对所述图片的标签进行网页排版，所述图片的标签的宽高为所述图片的宽高；

判断所述标签的排版位置是否在显示区域；

如果是，则获取所述图片的图片对象，并在所述标签的排版位置绘制所述图片对象。

其中，如果所述图片为首次绘制，则所述获取所述图片的图片对象之前，还包括：

根据所述图片原始数据创建所述图片的图片对象。

具体地，所述根据所述图片原始数据创建所述图片的图片对象之后，还包括：

存储创建的所述图片对象。优选地，在所述标签的排版位置绘制所述图片对象之后，还包括：

判断所述标签的排版位置是否在显示区域；

如果否，则删除存储的所述图片的图片对象。

另一方面，还提供了一种显示图片的装置，所述装置包括：

第一获取模块，用于在网页排版的过程中，解析图片原始数据的头信息，从解析得到的头信息中获取所述图片的宽高信息；

排版模块，用于根据所述图片的宽高信息对所述图片的标签进行网页排版，所述图片的标签的宽高为所述图片的宽高；

第二获取模块，用于获取所述图片的图片对象；

绘制模块，用于在所述第一判断模块判断所述标签的排版位置在显示区域之后，在所述标签的排版位置绘制所述图片对象。

所述装置还包括：

创建模块，具体用于如果所述图片为首次绘制，则根据所述图片原始数据创建所述图片的图片对象。

所述装置还包括：

存储模块，用于存储所述创建模块创建的图片对象。

所述装置还包括：

第二判断模块，用于在所述绘制模块绘制所述图片对象之后，判断所述标签的排版位置是否在显示区域；

清除模块，用于在所述第二判断模块判断所述标签的排版位置不在显示区域之后，删除存储的所述图片的图片对象。

本发明实施例提供的技术方案的有益效果是：

通过解析图片原始数据的头信息来获取图片宽高信息，避免了通过创建图片对象来获取图片宽高信息时占用过多内存的问题，进而提升显示图片的性能；另外，在标签排版位置不在显示区域时，通过删除已经创建的图片对象，从而减少图片对象占用的内存，进一步提升显示图片的性能。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例一提供的一种显示图片的方法流程图；

图2是本发明实施例二提供的一种显示图片的方法流程图；

图3是本发明实施例三提供的一种显示图片的装置结构示意图；

图4是本发明实施例三提供的另一种显示图片的装置结构示意图；

图5是本发明实施例三提供的又一种显示图片的装置结构示意图；

图6是本发明实施例三提供的再一种显示图片的装置结构示意图；

图7是本发明实施例三提供的再一种显示图片的装置结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

实施例一

参见图1，本实施例提供了一种显示图片的方法，该方法流程具体如下：

101：解析图片原始数据的头信息，从解析得到的头信息中获取图片的宽高信息。

102：根据图片的宽高信息对图片的标签进行网页排版。

103：获取图片的图片对象，并在标签的排版位置绘制图片对象。

其中，如果图片为首次绘制，则获取图片的图片对象之前，还包括：

根据图片原始数据创建图片的图片对象。

具体地，根据图片原始数据创建图片的图片对象之后，还包括：

存储创建的图片对象。

进一步地，在标签的排版位置绘制图片对象之前，还包括：

判断标签的排版位置是否在显示区域；

如果是，则执行在标签的排版位置绘制图片对象的步骤。

优选地，在标签的排版位置绘制图片对象之后，还包括：

判断标签的排版位置是否在显示区域；

如果否，则删除存储的图片的图片对象。

本实施例提供的方法，通过解析图片原始数据的头信息来获取图片宽高信息，避免了通过创建图片对象来获取图片宽高信息时占用过多内存的问题，进而提升显示图片的性能；另外，在标签排版位置不在显示区域时，通过删除已经创建的图片对象，从而减少图片对象占用的内存，进一步提升显示图片的性能。

为了更加详细的阐述本实施例提供的方法，下面，结合上述内容，通过下面的实施例二的内容对本实施例提供的方法进行具体描述，详见如下实施例：

实施例二

参见图2，本实施例提供了一种显示图片的方法，为了便于说明，以显示图片的装置为浏览器为例，对本实施例提供的方法进行举例说明。该方法流程具体如下：

201：判断网页中是否设置了图片的宽高信息，如果是，执行203；否则执行202。

浏览器输入网址时，先获取网页的框架，对网页中的元素(图片和文字等)进行排版，然后再对具体的元素进行绘制。其中，图片的数据量比较大，为了能快速完成网页排版，我们通常用图片的标签替代图片进行排版。而在对标签进行排版时，需要为图片预留足够的空间来绘制图片。因此，浏览器在网页排版的过程中，需要判断网页中是否设置了图片的宽高信息，如果是，执行步骤203；如果否，则执行步骤202。

具体地，浏览器判断网页中是否设置了图片的宽高的方法有很多种，例如，可以在网页中添加标志位，标志位用于标识网页中是否设置了图片的宽高信息，例如，将标志位设置为空，用于标识网页中没有设置宽高信息，将标志位设置为非空，用于标识网页中设置了宽高信息，或者将标志位的值设置为0，用于标识网页中没有设置宽高信息，将标志位的值设置为1，用于标识网页中设置了宽高信息，或是采用其他方式来通过标志位标识网页中是否设置了图片的宽高信息，本实施例不对标志位标识网页中是否设置了图片的宽高信息的方式进行限定。

202：解析图片原始数据的头信息，获取宽高信息，并根据宽高信息对图片的标签进行网页排版，执行步骤204。

步骤201判断出网页中没有设置图片的宽高信息，浏览器需要向服务器发起图片原始数据请求，并接收服务器返回的图片原始数据。其中，图片原始数据包括头信息和数据信息。头信息用来存放图片宽高等基本信息，数据信息则用来存放该图片的位图数据压缩之后的信息。本步骤中浏览器仅需获取图片的宽高信息以完成网页排版，因此，浏览器仅需解析图片原始数据的头信息，获取宽高信息。浏览器获取到该图片的宽高信息后，即可将图片的标签按照图片的宽高实际大小完成对网页的排版。

203：获取宽高信息，根据宽高信息对标签进行网页排版。

由于步骤201判断出网页中设置了图片的宽高信息，浏览器直接从网页中获取该图片的宽高信息即可。浏览器获取到该图片的宽高信息后，即可将图片的标签按照图片的宽高实际大小完成对网页的排版，具体排版方式可通过现有的排版方式实现，此处不再赘述。

204：判断标签的排版位置是否在显示区域内，如果是，执行205；否则执行208。

具体地，判断标签的排版位置是否在显示区域内的方法有很多种，例如，浏览器在对网页排版的过程中，还生成一个位置文件，用来存放各个标签的中心点的二维位置坐标。浏览器通过比较标签的位置坐标与显示区域的坐标判断标签是否在显示区域内。以显示区域的左上角、右上角、左下角和右下角的坐标分别为(X₀，Y₀)、(X₀，Yn)、(X_n，Y₀)和(X_n，Y_n)，图片的中心点坐标为(X，Y)为例，若比较结果为X₀<X±width/2<X_n或Y₀<Y±height/2<Y_n时，则判断标签在显示区域内，浏览器根据标签向服务器请求图片数据，即执行步骤205；若比较结果为X±width/2<X₀、X±width/2>X_n或者Y±height/2<Y₀、Y±height/2>Y_n时，则判断标签在显示区域外，即执行步骤208。其中，width和height分别为标签的宽度和高度。本实施例不对浏览器判断标签的排版位置是否在显示区域的方式进行限定。

205：判断图片是否创建了图片对象，如果是，执行207；否则执行206。

为了避免在切换页面焦点和页面滚动显示过程中多次创建图片对象，浏览器对在显示区域内的图片创建图片对象，并存储在缓存中，保证了重复调用图片时页面的绘制效率。其中，图片对象存储了图片解压后的原始位图数据以及图片的一些基本信息。浏览器在判断出标签的排版位置在显示区域内之后，还要对图片是否创建了图片对象进行判断，如果图片已经创建了图片对象，并存储在缓存中，则浏览器直接绘制缓存中的图片对象即可，即执行步骤207；如果图片是首次绘制，没有创建图片对象，则浏览器执行步骤206。

具体地，浏览器判断图片是否创建了图片对象，可以通过判断缓存中是否有图片对象的方式来实现。而浏览器判断缓存中是否有图片对象的方法有很多种，例如，图片对象的头信息还包括图片的标识信息。浏览器在判断图片是否有图片对象时，将该图片头信息中的标识信息与缓存中所有图片对象的头信息中的标识信息进行比较，若相等，则该图片在缓存中存有图片对象；否则该图片在缓存中无图片对象。本实施例不对浏览器判断缓存中是否有该图片的图片对象的方式进行限定。

206：创建并存储图片的图片对象，并获取该创建的图片对象，在标签的排版位置绘制该图片对象，流程结束。

浏览器判断出图片的标签在显示区域内，且缓存中没有该图片的图片对象，则浏览器根据标签向服务器发起图片数据请求，根据服务器返回的图片原始数据创建图片对象，并存储该图片对象，以避免在切换页面焦点和页面滚动显示过程中多次创建图片对象。最后，浏览器获取该创建的图片对象，在标签的排版位置绘制该图片对象。

207：获取存储的图片对象，在标签的排版位置绘制该图片对象，流程结束。

浏览器判断出图片的标签在显示区域内，且缓存中有该图片的图片对象，则浏览器直接从缓存中获取该图片对象，并在标签的排版位置绘制该图片对象，而无需再执行创建图片对象的步骤，从而提高绘制效率。

208：判断图片是否创建了图片对象，如果是，执行209；否则流程结束。

为了最大程度地减少图片所占内存，浏览器在判断出标签的排版位置在显示区域外之后，还要判断该图片是否创建了图片对象，如果是执行步骤209；如果否，流程结束。

具体地，浏览器判断图片是否创建了图片对象，可以通过判断缓存中是否有图片对象的方式来实现。而浏览器判断缓存中是否有图片对象的方法有很多种，例如，图片对象的头信息还包括图片的标识信息。浏览器在判断图片是否有图片对象时，将该图片头信息中的标识信息与缓存中所有图片对象的头信息中的标识信息进行比较，若相等，则该图片在缓存中存有图片对象；否则该图片在缓存中无图片对象。本实施例不对浏览器判断缓存中是否有该图片的图片对象的方式进行限定。

209：清除存储的图片对象。

对于标签的排版位置在显示区域外的图片，浏览器释放该图片的图片对象，节省不必要的内存占用，提高浏览器运行速度。

本实施例提供的方法，通过解析图片原始数据的头信息来获取图片宽高信息，避免了通过创建图片对象来获取图片宽高信息时占用过多内存的问题，进而提升显示图片的性能；另外，在标签排版位置不在显示区域时，通过删除已经创建的图片对象，从而减少图片对象占用的内存，进一步提升显示图片的性能。

实施例三

参见图3，本实施例提供了一种显示图片的装置，该装置用于执行上述实施例一和实施例二所提供的图片显示的方法，该装置包括：

第一获取模块301，用于解析图片原始数据的头信息，从解析得到的头信息中获取图片的宽高信息；

排版模块302，用于根据图片的宽高信息对图片的标签进行网页排版；

第二获取模块303，用于获取图片的图片对象；

绘制模块304，用于在标签的排版位置绘制图片对象。

其中，第一获取模块301获取图片的宽高信息的具体方式可参见上述实施例二中步骤202的相关描述，此处暂不赘述。

针对首次绘制图片的情况，参见图4，该装置还包括：

创建模块305，具体用于如果图片为首次绘制，则根据图片原始数据创建图片的图片对象。

在首次绘制图片之后，针对已经为该图片创建了图片对象的情况，为了避免重绘该图片时，重复执行创建图片对象的过程，参见图5，该装置还包括：

存储模块306，用于存储创建模块305创建的图片对象。

如上，通过存储模块306存储创建模块305创建的图片对象，从而再下次绘制该图片对象所对应的图片时，可由第二获取模块303直接获取存储模块306存储的图片对象，而无需再次进行创建图片对象的过程，从而可以提高绘制效率。参见图6，装置还包括：

第一判断模块307，用于在绘制模块304绘制图片对象之前，判断标签的排版位置是否在显示区域；

绘制模块304，用于在第一判断模块307判断标签的排版位置在显示区域之后，在标签的排版位置绘制图片对象。

参见图7，装置还包括：

第二判断模块308，用于在绘制模块304绘制图片对象之后，判断标签的排版位置是否在显示区域；

清除模块309，用于在第二判断模块308判断标签的排版位置不在显示区域之后，删除存储的图片的图片对象。

本实施例提供的装置，通过解析图片原始数据的头信息来获取图片宽高信息，避免了通过创建图片对象来获取图片宽高信息时占用过多内存的问题，进而提升显示图片的性能；另外，在标签排版位置不在显示区域时，通过删除已经创建的图片对象，从而减少图片对象占用的内存，进一步提升显示图片的性能。

需要说明的是：上述实施例提供的显示图片的装置在显示图片时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的显示图片的装置与显示图片的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

本发明实施例中的全部或部分步骤，可以利用软件实现，相应的软件程序可以存储在可读取的存储介质中，如光盘或硬盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种显示图片的方法，其特征在于，所述方法包括：

在网页排版的过程中，解析图片原始数据的头信息，从解析得到的头信息中获取所述图片的宽高信息；

根据所述图片的宽高信息对所述图片的标签进行网页排版，所述图片的标签的宽高为所述图片的宽高；

判断所述标签的排版位置是否在显示区域；

如果是，则获取所述图片的图片对象，并在所述标签的排版位置绘制所述图片对象。

2.根据权利要求1所述的方法，其特征在于，如果所述图片为首次绘制，则所述获取所述图片的图片对象之前，还包括：

根据所述图片原始数据创建所述图片的图片对象。

3.根据权利要求2所述的方法，其特征在于，所述根据所述图片原始数据创建所述图片的图片对象之后，还包括：

存储创建的所述图片对象。

4.根据权利要求3所述的方法，其特征在于，所述在所述标签的排版位置绘制所述图片对象之后，还包括：

判断所述标签的排版位置是否在显示区域；

如果否，则删除存储的所述图片的图片对象。

5.一种显示图片的装置，其特征在于，所述装置包括：

第一获取模块，用于在网页排版的过程中，解析图片原始数据的头信息，从解析得到的头信息中获取所述图片的宽高信息；

排版模块，用于根据所述图片的宽高信息对所述图片的标签进行网页排版，所述图片的标签的宽高为所述图片的宽高；

第一判断模块，用于在所述绘制模块绘制所述图片对象之前，判断所述标签的排版位置是否在显示区域；

第二获取模块，用于获取所述图片的图片对象；

绘制模块，用于在所述第一判断模块判断所述标签的排版位置在显示区域之后，在所述标签的排版位置绘制所述图片对象。

6.根据权利要求5所述的装置，其特征在于，所述装置还包括：

创建模块，具体用于如果所述图片为首次绘制，则根据所述图片原始数据创建所述图片的图片对象。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

存储模块，用于存储所述创建模块创建的图片对象。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

第二判断模块，用于在所述绘制模块绘制所述图片对象之后，判断所述标签的排版位置是否在显示区域；

清除模块，用于在所述第二判断模块判断所述标签的排版位置不在显示区域之后，删除存储的所述图片的图片对象。