网页中的图片显示方法、装置及终端的制作方法
【专利摘要】本发明实施例公开了一种网页中的图片显示方法、装置及终端，属于数字图像处理领域。该方法包括：在网页中的图片的显示区域创建与显示区域大小相同的画布；获取图片的待渲染数据，并根据屏幕分辨率调整获取到的图片的待渲染数据；在创建的画布中渲染调整后的图片的待渲染数据，在网页中显示图片。本发明通过在网页中的图片的显示区域创建与该显示区域大小相同的画布，并在获取图片的待渲染数据后，根据屏幕分辨率调整获取到的图片的待渲染数据；之后在创建的画布中渲染调整后的图片的待渲染数据，并在网页中显示图片，从而可根据屏幕分辨率适应性调整需要渲染的图片的待渲染数据的大小，对于屏幕分辨率较低的显示设备而言，显示图片速度快。
【专利说明】网页中的图片显示方法、装置及终端
【技术领域】
[0001]本发明涉及数字图像处理领域，特别涉及一种网页中的图片显示方法、装置及终端。
【背景技术】
[0002]随着信息技术的不断发展，人们更加频繁的使用移动设备端来处理日常事务。处理日常事务经常离不开互联网的帮助，这促使越来越多的网站开始支持移动设备端的网页浏览。在浏览过程中进行的滚动网页、缩放页面等操作会造成移动设备的原生应用软件显示网页，而网页中的图片是占用资源较多内容之一。如何高效地对网页中的图片进行显示，从而快速连接互联网是人们需要解决的问题。
[0003]目前，移动设备的原生应用软件有两种对网页中的图片进行显示的方式，第一种方式:通过HTML (Hypertext Markup Language,超文本标记语言)在图片所在网页的显示区域创建图片的占位空间；通过MG标签的SRC (Source，源)属性和ALT (Alter，改变)属性分别设置图片的URL (Uniform Resource Locator,统一资源定位符)值和图片的替代文本；向网络侧发送获取图片的待渲染数据请求，获取图片的待渲染数据；如果成功获取图片的待渲染数据，则根据获取到的图片的待渲染数据按照图片的原始大小在图片所在网页的显示区域来渲染并显示图片。第二种方式:通过CSS (Cascading Style Sheet,样式表)的背景图像属性将需要显示的图片放入背景；通过背景图像属性设置图片的URL值；向网络侧发送获取图片的待渲染数据请求，获取图片的待渲染数据；如果成功获取图片的待渲染数据，则根据获取到的图片的待渲染数据按照图片的原始大小在图片所在网页的显示区域来渲染并显示图片。
[0004]在实现本发明的过程中，发明人发现目前网页中的图片显示技术至少存在以下问题:
[0005]采用MG标签和CSS显示网页中的图片时，需要按照图片的原始大小在图片所在网页的显示区域来渲染并显示图片，对于屏幕分辨率比较低的显示设备而言，其占用的资源过多，导致图片的显示速度较慢，因而在打开图片较多的网页时，有可能会导致显示的网页出现卡死的现象。
【发明内容】
[0006]为了解决目前网页中的图片显示技术存在的问题，本发明实施例提供了一种网页中的图片显示方法、装置及终端。
[0007]—方面，提供了一种网页中的图片显示方法，所述方法包括:
[0008]在网页中的图片的显示区域创建与所述显示区域大小相同的画布；
[0009]获取所述图片的待渲染数据，并根据屏幕分辨率调整获取到的图片的待渲染数据；
[0010]在创建的画布中渲染调整后的所述图片的待渲染数据，在所述网页中显示所述图片。
[0011]优选地，所述在网页中的图片的显示区域创建与所述显示区域大小相同的画布，包括:
[0012]在加载所述网页时，在所述图片的显示区域使用canvas参数创建与所述显示区域大小相同的画布。
[0013]优选地，所述获取所述图片的待渲染数据，包括:
[0014]使用图像接口向网络侧发送加载所述图片的HTTP (Hyper Text TransportProtocol,超文本传输协议)请求,所述HTTP请求中携带所述图片对应的URL ；
[0015]接收所述网络侧根据所述HTTP请求返回的所述图片的待渲染数据。
[0016]优选地，所述获取所述图片的待渲染数据之后，包括:
[0017]将所述获取到的图片的待渲染数据存储到脚本文件中；
[0018]所述在创建的画布中渲染调整后的所述图片的待渲染数据之后，还包括:
[0019]从所述脚本文件中读出所述获取到的图片的待渲染数据，在显示的画布中渲染所述获取到的图片的待渲染数据。
[0020]优选地，所述根据屏幕分辨率调整获取到的图片的待渲染数据，还包括:
[0021]根据屏幕分辨率调整获取到的图片的分辨率，得到分辨率调整后的图片的待渲染数据，并将分辨率调整后的图片的待渲染数据作为调整后的所述图片的待渲染数据。
[0022]另一方面，提供了一种网页中的图片显示装置，所述装置包括:
[0023]创建模块，用于在网页中的图片的显示区域创建与所述显示区域大小相同的画布；
[0024]获取模块，用于获取所述图片的待渲染数据；
[0025]调整模块，用于根据屏幕分辨率调整获取到的图片的待渲染数据；
[0026]渲染模块，用于在创建的画布中渲染调整后的所述图片的待渲染数据；
[0027]显示模块，用于在网页中显示所述图片。
[0028]优选地，所述创建模块，用于在加载所述网页时，在所述图片的显示区域使用canvas参数创建与所述显示区域大小相同的画布。
[0029]优选地，所述获取模块，包括:
[0030]发送单元，用于使用图像接口向网络侧发送加载所述图片的HTTP请求，所述HTTP请求中携带所述图片对应的URL ；
[0031]接收单元，用于接收所述网络侧根据所述HTTP请求返回的所述图片的待渲染数据。
[0032]优选地，所述终端，还包括:
[0033]存储模块，用于将所述获取到的图片的待渲染数据存储到脚本文件中；
[0034]所述渲染模块，用于从所述脚本文件中读出所述图片的待渲染数据，并根据屏幕分辨率调整读出的图片的待渲染数据，在创建的画布中渲染所述调整后的图片的待渲染数据。
[0035]优选地，调整模块，用于根据屏幕分辨率调整获取到的图片的分辨率，得到分辨率调整后的图片的待渲染数据，并将分辨率调整后的图片的待渲染数据作为调整后的所述图片的待渲染数据。[0036]还提供了一种终端，所述终端有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令:
[0037]在网页中的图片的显示区域创建与所述显示区域大小相同的画布；
[0038]获取所述图片的待渲染数据，并根据屏幕分辨率调整获取到的图片的待渲染数据；
[0039]在创建的画布中渲染调整后的所述图片的待渲染数据，在所述网页中显示所述图片。
[0040]本发明实施例提供的技术方案带来的有益效果是:
[0041]通过在网页中的图片的显示区域创建与该显示区域大小相同的画布，并在获取图片的待渲染数据后，根据屏幕分辨率调整获取到的图片的待渲染数据；之后在创建的画布中渲染调整后的图片的待渲染数据，并在网页中显示图片，从而可根据屏幕分辨率适应性调整在创建的画布中渲染的图片的待渲染数据的大小，对于屏幕分辨率比较低的显示设备而言，其占用的资源较少，因而可加快显示图片的速度。
[0042]另外，通过将获取到的图片的待渲染数据存储在脚本文件中，从而在重绘过程中，可以直接从脚本文件中读出获取到的图片的待渲染数据，并在显示的画布中渲染获取到的图片的待渲染数据，而无需再向网络侧发送加载图片的HTTP请求，进一步减少了资源的占用，加快了显示图片的速度。
【专利附图】
【附图说明】
[0043]为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0044]图1是本发明实施例一提供的一种网页中的图片显示方法流程图；
[0045]图2是本发明实施例二提供的一种网页中的图片显示方法流程图；
[0046]图3是本发明实施例二提供的一种网页中的图片显示显示界面示意图；
[0047]图4是本发明实施例三提供的一种网页中的图片显示方法流程图；
[0048]图5是本发明实施例四提供的一种网页中的图片显示装置的结构示意图；
[0049]图6是本发明实施例四提供的一种获取模块的内部结构示意图；
[0050]图7是本发明实施例四提供的一种网页中的图片显示装置的结构示意图；
[0051]图8是本发明实施例五提供的一种终端的结构示意图。
【具体实施方式】
[0052]为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。
[0053]实施例一
[0054]本发明实施例提供了一种网页中的图片显示方法，参见图1，方法流程包括:
[0055]101:在网页中的图片的显示区域创建与显示区域大小相同的画布；[0056]102:获取图片的待渲染数据，并根据屏幕分辨率调整获取到的图片的待渲染数据；
[0057]103:在创建的画布中渲染调整后的图片的待渲染数据，在所述网页中显示图片。
[0058]本发明实施例提供的方法，通过在网页中的图片的显示区域创建与该显示区域大小相同的画布，并在获取图片的待渲染数据后，根据屏幕分辨率调整获取到的图片的待渲染数据；之后在创建的画布中渲染调整后的图片的待渲染数据，从而可根据屏幕分辨率适应性调整在创建的画布中渲染的图片的待渲染数据的大小，对于屏幕分辨率比较低的显示设备而言，其占用的资源较少，因而可加快显示图片的速度。
[0059]实施例二
[0060]结合上述实施例一的内容，本发明实施例提供了一种网页中的图片显示方法。参见图2，方法流程包括:
[0061]201:在网页中的图片的显示区域创建与显示区域大小相同的画布；
[0062]针对该步骤，创建的画布用于后续步骤中渲染调整后的图片的待渲染数据。创建画布的方式包括但不限于:在加载网页时，在图片的显示区域使用canvas参数创建与显示区域大小相同的画布。需要说明的是，由于还没有获取图片的待渲染数据，所以创建的画布是空白的画布。关于创建画布的方式，除了上述创建方式外，还可以采用其他方式创建，本实施例对此不作具体限定。
[0063]为了便于理解，以如图3 (I)所示的网页为例进行说明。例如，设图片A为网页中的图片，图片A的高度和宽度均为400像素。则如图3(2)所示，在加载网页时，在图片A所在显示区域使用canvas参数创建与图片A的显示区域大小相同的画布A’，创建的画布A’的高度和宽度均为400像素。由于还没有获取图片A的待渲染数据，所以创建的画布A’是空白的画布。
[0064]202:使用图像接口向网络侧发送加载图片的HTTP请求，HTTP请求中携带图片对应的URL ；
[0065]针对该步骤，HTTP请求能够完成终端和网络侧之间的通信。关于发送加载图片的HTTP请求的方式，可使用终端的图像接口完成向网络侧的服务器发送加载图片的HTTP请求。进一步地,HTTP请求中的内容包括但不限于:请求行、消息报头、请求正文等。其中，请求行包括但不限于:请求方法、URL、HTTP请求的协议版本、回车和换行等。
[0066]203:接收网络侧根据HTTP请求返回的图片的待渲染数据；
[0067]网络侧在接收到HTTP请求后，将对该HTTP请求返回对应的响应，该响应中包括但不限于关于HTTP请求的状态信息以及被请求的内容，在本实施例中，该被请求的内容即为图片的待渲染数据。可由终端的图像接口接收网络侧根据HTTP请求返回的HTTP请求的状态信息和图片的待渲染数据。
[0068]204:将获取到的图片的待渲染数据存储在脚本文件中；
[0069]该步骤为可选的优选步骤，本实施例对将获取到的图片的待渲染数据存储在脚本文件中的方式不进行限定，通过将获取到的图片的待渲染数据存储在脚本文件中，可使后续步骤重绘该图片时，无需再向网络侧请求该图片的待渲染数据，进而节省因进行网络交互而占用的资源，从而加快显示图片的速度。
[0070]205:根据屏幕分辨率调整获取到的图片的待渲染数据；[0071]根据屏幕分辨率调整获取到的图片的待渲染数据的方式包括但不限于根据屏幕分辨率调整获取到的图片的待渲染数据中的图片分辨率。需要说明的是，屏幕分辨率就是屏幕上显示的像素点个数，以水平像素点个数*垂直像素点个数的形式表示；图片分辨率就是图片上用于存储信息的像素点个数，以水平像素点个数*垂直像素点个数的形式表示。在屏幕分辨率比较低的情况下，调整需要渲染的像素点个数时，可以舍弃图片的待渲染数据中的不必要的像素点，即减少需要渲染的像素点个数，从而提高后续渲染的速度。
[0072]为了便于理解，以屏幕分辨率为300*300，获取到的图片的待渲染数据中图片分辨率为400*400为例，则根据屏幕分辨率调整需要渲染的像素点个数时，可舍弃图片的待渲染数据中的不必要像素点，使调整后的图片的待渲染数据中的图片分辨率变成300*300。
[0073]206:在创建的画布中渲染调整后的图片的待渲染数据，在网页中显示图片；
[0074]针对该步骤，由于创建的画布是在网页中的图片的显示区域创建的，又由于创建的画布是空白画布，因此，通过在创建的画布中渲染调整后的图片的待渲染数据，并在网页中显示图片，实现将网页中的图片进行显示。
[0075]其中，由于调整后的图片的待渲染数据是根据屏幕分辨率调整的，针对图片的原始尺寸比较大的情况，通过根据屏幕分辨率调整图片的待渲染数据，之后再在创建的画布中渲染调整后的图片的待渲染数据，因此，达到了压缩图片的效果，可使图片的显示效果达到最优。
[0076]进一步地，通过上述步骤201至步骤206即完成了图片的显示过程。针对网页刷新等需要对显示的图片进行重绘的情况，本实施例提供的方法还包括后续步骤。
[0077]207:从脚本文件中读出获取到的图片的待渲染数据，并根据屏幕分辨率调整读出的图片的待渲染数据；
[0078]具体地，由于预先已将获取到的图片的待渲染数据存储在脚本文件中，因此，在确定需要重绘图片时，可直接从脚本文件中读出获取到的图片的待渲染数据，而无需再向网络侧请求图片的待渲染数据，进而节省因进行网络交互而占用的资源，从而加快显示图片的速度。具体实施时，可采用数据读取的方式从脚本文件中读出获取到的图片的待渲染数据的方式。
[0079]进一步地，为了使重绘的图片过程仍然可以根据屏幕分辨率适应性调整，从而降低占用的资源，加快显示图片的速度，本实施例提供的方法在从脚本文件中读出获取到的图片的待渲染数据之后，还包括根据屏幕分辨率调整读出的图片的待渲染数据的过程。关于根据屏幕分辨率调整读出的图片的待渲染数据的方式，本实施例不作具体限定，此处根据屏幕分辨率调整读出的图片的待渲染数据的方式与根据屏幕分辨率调整获取到的图片的待渲染数据的方式相同，具体可参考上述步骤205中的内容，此处不再赘述。
[0080]208:在创建的画布中渲染调整后的图片的待渲染数据，在网页中显示图片。
[0081]针对该步骤，在创建的画布中渲染调整后的图片的待渲染数据的方式与上述步骤206的方式相同，具体可参考上述步骤206中的内容，此处不再赘述。
[0082]本发明实施例提供的方法，通过在网页中的图片的显示区域创建与该显示区域大小相同的画布，并在获取图片的待渲染数据后，根据屏幕分辨率调整获取到的图片的待渲染数据；之后在创建的画布中渲染调整后的图片的待渲染数据，并在网页中显示图片，从而可根据屏幕分辨率适应性调整在创建的画布中渲染的图片的待渲染数据的大小，对于屏幕分辨率比较低的显示设备而言，其占用的资源较少，因而可加快显示图片的速度；
[0083]通过将获取到的图片的待渲染数据存储在脚本文件中，从而在重绘过程中，可以直接从脚本文件中读出获取到的图片的待渲染数据，并对读出的图片的待渲染数据进行调整后，在显示的画布中渲染调整后的图片的待渲染数据，而无需再向网络侧发送加载图片的HTTP请求，进一步减少了资源的占用，加快了显示图片的速度。
[0084]实施例三
[0085]结合上述实施例一的内容，本发明实施例提供了一种网页中的图片显示方法。参见图4，方法流程包括:
[0086]401:在网页中的图片的显示区域创建与显示区域大小相同的画布；
[0087]针对该步骤，创建的画布用于后续步骤中渲染调整后的图片的待渲染数据。创建画布的方式包括但不限于:在加载网页时，在图片的显示区域使用canvas参数创建与显示区域大小相同的画布。需要说明的是，由于还没有获取图片的待渲染数据，所以创建的画布是空白的画布。关于创建画布的方式，除了上述创建方式外，还可以采用其他方式创建，本实施例对此不作具体限定。
[0088]为了便于理解，以如图3 (I)所示的网页为例进行说明。例如，设图片A为网页中的图片，图片A的高度和宽度均为400像素。则如图3(2)所示，在加载网页时，在图片A所在显示区域使用canvas参数创建与图片A的显示区域大小相同的画布A’，创建的画布A’的高度和宽度均为400像素。由于还没有获取图片A的待渲染数据，所以创建的画布A’是空白的画布。
[0089]402:使用图像接口向网络侧发送加载图片的HTTP请求，HTTP请求中携带图片对应的URL ；
[0090]针对该步骤，HTTP请求能够完成终端和网络侧之间的通信。关于发送加载图片的HTTP请求的方式，可使用终端的图像接口完成向网络侧的服务器发送加载图片的HTTP请求。进一步地,HTTP请求中的内容包括但不限于:请求行、消息报头、请求正文等。其中，请求行包括但不限于:请求方法、URL、HTTP请求的协议版本、回车和换行等。
[0091]403:接收网络侧根据HTTP请求返回的图片的待渲染数据；
[0092]网络侧在接收到HTTP请求后，将对该HTTP请求返回对应的响应，该响应中包括但不限于关于HTTP请求的状态信息以及被请求的内容，在本实施例中，该被请求的内容即为图片的待渲染数据。可由终端的图像接口接收网络侧根据HTTP请求返回的HTTP请求的状态信息和图片的待渲染数据。
[0093]404:根据屏幕分辨率调整获取到的图片的待渲染数据；
[0094]根据屏幕分辨率调整获取到的图片的待渲染数据的方式包括但不限于根据屏幕分辨率调整获取到的图片的待渲染数据中的图片分辨率。需要说明的是，屏幕分辨率就是屏幕上显示的像素点个数，以水平像素点个数*垂直像素点个数的形式表示；图片分辨率就是图片上用于存储信息的像素点个数，以水平像素点个数*垂直像素点个数的形式表示。在屏幕分辨率比较低的情况下，调整需要渲染的像素点个数时，可以舍弃图片的待渲染数据中的不必要的像素点，即减少需要渲染的像素点个数，从而提高后续渲染的速度。
[0095]为了便于理解，以屏幕分辨率为300*300，获取到的图片的待渲染数据中图片分辨率为400*400为例，则根据屏幕分辨率调整需要渲染的像素点个数时，可舍弃图片的待渲染数据中的不必要像素点，使调整后的图片的待渲染数据中的图片分辨率变成300*300。
[0096]405:将调整后的图片的待渲染数据存储到脚本文件中；
[0097]针对该步骤，本实施例不对将调整后的图片的待渲染数据存储在脚本文件中的方式进行限定，通过将调整后的图片的待渲染数据存储在脚本文件中，可使后续步骤无需再向网络侧请求该图片的待渲染数据，进而节省因进行网络交互而占用的资源，从而加快显示图片的速度。
[0098]406:在创建的画布中渲染调整后的图片的待渲染数据，在网页中显示图片；
[0099]针对该步骤，由于创建的画布是在网页中的图片的显示区域创建的，又由于创建的画布是空白画布，因此，通过在创建的画布中渲染调整后的图片的待渲染数据，并在网页中显示图片，实现将网页中的图片进行显示。
[0100]其中，由于调整后的图片的待渲染数据是根据屏幕分辨率调整的，针对图片的原始尺寸比较大的情况，通过根据屏幕分辨率调整图片的待渲染数据，之后再在创建的画布中渲染调整后的图片的待渲染数据，因此，达到了压缩图片的效果，可使图片的显示效果达到最优。
[0101]进一步地，通过上述步骤401至步骤406即完成了图片的显示过程。针对网页刷新等需要对显示的图片进行重绘的情况，本实施例提供的方法还包括后续步骤。
[0102]407:从脚本文件中读出调整后的图片的待渲染数据；
[0103]由于预先已将调整后的图片的待渲染数据存储在脚本文件中，因此，在确定需要重绘图片时，可直接从脚本文件中读出调整后的图片的待渲染数据，而无需再向网络侧请求图片的待渲染数据，也无需再对图片的待渲染数据进行调整，进而节省因进行网络交互而占用的资源，从而加快显示图片的速度。可采用数据读取的方式从脚本文件中读出调整后的图片的待渲染数据的方式。
[0104]408:在创建的画布中渲染读出的调整后的图片的待渲染数据，并在网页中显示图片。
[0105]针对该步骤，在创建的画布中渲染读出的调整后的图片的待渲染数据的方式与上述步骤406的方式相同，具体可参考上述步骤406中的内容，此处不再赘述。
[0106]本发明实施例提供的方法，通过在网页中的图片的显示区域创建与该显示区域大小相同的画布，并在获取图片的待渲染数据后，根据屏幕分辨率调整获取到的图片的待渲染数据；之后在创建的画布中渲染调整后的图片的待渲染数据，从而可根据屏幕分辨率适应性调整在创建的画布中渲染的图片的待渲染数据的大小，对于屏幕分辨率比较低的显示设备而言，其占用的资源较少，因而可加快显示图片的速度；
[0107]通过将调整后的图片的待渲染数据存储到脚本文件中，从而在重绘过程中，可以直接从脚本文件中读出调整后的图片的待渲染数据，并在创建的画布中渲染读出的调整后的图片的待渲染数据，而无需再向网络侧发送加载图片的HTTP请求，也无需再对图片的待渲染数据进行调整，进一步减少了资源的占用，加快了显示图片的速度。
[0108]实施例四
[0109]参见图5，本发明实施例提供了一种网页中的图片显示装置，该装置包括:
[0110]创建模块501，用于在网页中的图片的显示区域创建与显示区域大小相同的画布；[0111]获取模块502，用于获取图片的待渲染数据；
[0112]调整模块503，用于根据屏幕分辨率调整获取到的图片的待渲染数据；
[0113]渲染模块504，用于在创建的画布中渲染调整后的图片的待渲染数据；
[0114]显示模块505，用于在网页中显示图片。
[0115]作为一种优选实施例，创建模块501，用于在加载所述网页时，在图片的显示区域使用canvas参数创建与显示区域大小相同的画布。
[0116]作为一种优选实施例,参见图6,获取模块502,包括:
[0117]发送单元5021，使用图像接口向网络侧发送加载图片的HTTP请求，HTTP请求中携带图片对应的URL ；
[0118]接收单元5022，用于接收网络侧根据HTTP请求返回的图片的待渲染数据。
[0119]作为一种优选实施例，参见图7，该终端还包括:
[0120]存储模块506，用于将获取到的图片的待渲染数据存储到脚本文件中；
[0121]渲染模块504，还用于从脚本文件中读出图片的待渲染数据，并根据屏幕分辨率调整读出的图片的待渲染数据，在创建的画布中渲染所述调整后的图片的待渲染数据。
[0122]作为一种优选实施例，调整模块503，用于根据屏幕分辨率调整获取到的图片的分辨率，得到分辨率调整后的图片的待渲染数据，并将分辨率调整后的图片的待渲染数据作为调整后的所述图片的待渲染数据。
[0123]综上，本发明实施例提供的终端，通过在网页中的图片的显示区域创建与该显示区域大小相同的画布，并在获取图片的待渲染数据后，根据屏幕分辨率调整获取到的图片的待渲染数据；之后在创建的画布中渲染调整后的图片的待渲染数据，并在网页中显示图片，从而可根据屏幕分辨率适应性调整在创建的画布中渲染的图片的待渲染数据的大小，对于屏幕分辨率比较低的显示设备而言，其占用的资源较少，因而可加快显示图片的速度。
[0124]另外，通过将获取到的图片的待渲染数据存储在脚本文件中，从而在重绘过程中，可以直接从脚本文件中读出获取到的图片的待渲染数据，并对读出的图片的待渲染数据进行调整后，在显示的画布中渲染调整后的图片的待渲染数据，而无需再向网络侧发送加载图片的HTTP请求，进一步减少了资源的占用，加快了显示图片的速度。
[0125]实施例五
[0126]图8是本发明实施例提供的一种终端结构示意图。参见图8，该终端可以用于实施上述实施例中提供的基于手势操作的会话处理方法。其中，该终端可以为手机、平板电脑pad、穿戴式移动设备(如智能手表)等。优先的:
[0127]终端700可以包括通信单元110、包括有一个或一个以上计算机可读存储介质的存储器120、输入单元130、显示单元140、传感器150、音频电路160、WiFi (wirelessfidelity，无线保真)模块170、包括有一个或者一个以上处理核心的处理器180、以及电源190等部件。本领域技术人员可以理解，图8中示出的终端设备结构并不构成对终端设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中:
[0128]通信单元110可用于收发信息或通话过程中，信号的接收和发送，该通信单元110可以为RF (Radio Frequency，射频)电路、路由器、调制解调器、等网络通信设备。特别地，当通信单元110为RF电路时，将基站的下行信息接收后，交由一个或者一个以上处理器180处理；另外，将涉及上行的数据发送给基站。通常，作为通信单元的RF电路包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM)卡、收发信机、耦合器、LNA(Low Noise Amplifier,低噪声放大器)、双工器等。此外,通信单元110还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于 GSM(Global System of Mobile communication,全球移动通讯系统)、GPRS (GeneralPacket Radio Service,通用分组无线服务)、CDMA (Code Division Multiple Access,石马分多址)、WCDMA(Wideband Code Division Multiple Access,宽带码分多址)、LTE(LongTerm Evolution,长期演进)、电子邮件、SMS (Short Messaging Service,短消息服务)等。存储器120可用于存储软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器120可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端设备700的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器120还可以包括存储器控制器，以提供处理器180和输入单元130对存储器120的访问。
[0129]输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。优选地，输入单元130可包括触敏表面131以及其他输入设备132。触敏表面131，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面131上或在触敏表面131附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面131。除了触敏表面131，输入单元130还可以包括其他输入设备132。优选地，其他输入设备132可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。
[0130]显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端700的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可包括显示面板141,可选的,可以采用LCD(Liquid Crystal Display,液晶显示器)、OLED (Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板141。进一步的,触敏表面131可覆盖显示面板141，当触敏表面131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图8中，触敏表面131与显示面板141是作为两个独立的部件来实现输入和输入功能,但是在某些实施例中，可以将触敏表面131与显示面板141集成而实现输入和输出功能。
[0131]终端700还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。优选地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在终端700移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于终端700还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。
[0132]音频电路160、扬声器161，传声器162可提供用户与终端700之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号,传输到扬声器161,由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一终端设备，或者将音频数据输出至存储器120以便进一步处理。音频电路160还可能包括耳塞插孔，以提供外设耳机与终端设备700的通信。
[0133]为了实现无线通信，该终端设备上可以配置有无线通信单元170，该无线通信单元170可以为WiFi模块。WiFi属于短距离无线传输技术，终端700通过无线通信单元170可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图8示出了无线通信单元170，但是可以理解的是，其并不属于终端700的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。
[0134]处理器180是终端700的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端700的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器180可包括一个或多个处理核心；优选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。
[0135]终端700还包括给各个部件供电的电源190 (比如电池)，优选的，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源190还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
[0136]尽管未示出，终端700还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端设备的显示单元是触摸屏显示器，该终端包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令:
[0137]在网页中的图片的显示区域创建与显示区域大小相同的画布；
[0138]获取图片的待渲染数据，并根据屏幕分辨率调整获取到的图片的待渲染数据；
[0139]在创建的画布中渲染调整后的图片的待渲染数据，在网页中显示图片。
[0140]可选地，存储器还包括进行以下操作的指令:在加载网页时，在图片的显示区域使用canvas参数创建与所述显示区域大小相同的画布。
[0141]可选地，存储器还包括进行以下操作的指令:获取图片的待渲染数据，包括:使用图像接口向网络侧发送加载所述图片的超文本传输协议HTTP请求，HTTP请求中携带图片对应的统一资源定位符URL ;接收网络侧根据HTTP请求返回的图片的待渲染数据。[0142]可选地，存储器还包括进行以下操作的指令:获取所述图片的待渲染数据之后，还包括:将获取到的图片的待渲染数据存储到脚本文件中；在创建的画布中渲染调整后的图片的待渲染数据，包括:从脚本文件中读出图片的待渲染数据，并根据屏幕分辨率调整读出的图片的待渲染数据，在创建的画布中渲染调整后的图片的待渲染数据。
[0143]可选地，存储器还包括进行以下操作的指令:根据屏幕分辨率调整获取到的图片的待渲染数据，包括:根据屏幕分辨率调整获取到的图片的分辨率，得到分辨率调整后的图片的待渲染数据，并将分辨率调整后的图片的待渲染数据作为调整后的图片的待渲染数据。
[0144]综上，本发明实施例提供的网页中的终端，通过在网页中的图片的显示区域创建与该显示区域大小相同的画布，并在获取图片的待渲染数据后，根据屏幕分辨率调整获取到的图片的待渲染数据；之后在创建的画布中渲染调整后的图片的待渲染数据，并在网页中显示图片，从而可根据屏幕分辨率适应性调整在创建的画布中渲染的图片的待渲染数据的大小，对于屏幕分辨率比较低的显示设备而言，其占用的资源较少，因而可加快显示图片的速度。
[0145]需要说明的是:上述实施例提供的网页中的图片显示终端在显示网页中的图片时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将终端的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的网页中的图片显示终端与网页中的图片显示方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。
[0146]上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
[0147]本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。
[0148]以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
【权利要求】
1.一种网页中的图片显示方法，其特征在于，所述方法包括: 在网页中的图片的显示区域创建与所述显示区域大小相同的画布； 获取所述图片的待渲染数据，并根据屏幕分辨率调整获取到的图片的待渲染数据； 在创建的画布中渲染调整后的所述图片的待渲染数据，在所述网页中显示所述图片。
2.根据权利要求1所述的方法，其特征在于，所述在网页中的图片的显示区域创建与所述显示区域大小相同的画布，包括: 在加载所述网页时，在所述图片的显示区域使用canvas参数创建与所述显示区域大小相同的画布。
3.根据权利要求1所述的方法，其特征在于，所述获取所述图片的待渲染数据，包括: 使用图像接口向网络侧发送加载所述图片的超文本传输协议HTTP请求，所述HTTP请求中携带所述图片对应的统一资源定位符URL ； 接收所述网络侧根据所述HTTP请求返回的所述图片的待渲染数据。
4.根据权利要求1至3中任一权利要求所述的方法，其特征在于，所述获取所述图片的待渲染数据之后，还包括: 将所述获取到的图片的待渲染数据存储到脚本文件中； 所述在创建的画布中渲染调整后的所述图片的待渲染数据，包括: 从所述脚本文件中读出所述图片的待渲染数据，并根据屏幕分辨率调整所述读出的图片的待渲染数据，在创建的画布中渲染所述调整后的图片的待渲染数据。
5.根据权利要求1所述的方法，其特征在于，所述根据屏幕分辨率调整获取到的图片的待渲染数据，包括: 根据屏幕分辨率调整获取到的图片的分辨率，得到分辨率调整后的图片的待渲染数据，并将分辨率调整后的图片的待渲染数据作为调整后的所述图片的待渲染数据。
6.一种网页中的图片显示装置，其特征在于，所述装置包括: 创建模块，用于在网页中的图片的显示区域创建与所述显示区域大小相同的画布； 获取模块，用于获取所述图片的待渲染数据； 调整模块，用于根据屏幕分辨率调整获取到的图片的待渲染数据； 渲染模块，用于在创建的画布中渲染调整后的所述图片的待渲染数据； 显示模块，用于在网页中显示所述图片。
7.根据权利要求6所述的装置，其特征在于，所述创建模块，用于在加载所述网页时，在所述图片的显示区域使用canvas参数创建与所述显示区域大小相同的画布。
8.根据权利要求6所述的装置，其特征在于，所述获取模块，包括: 发送单元，用于使用图像接口向网络侧发送加载所述图片的HTTP请求，所述HTTP请求中携带所述图片对应的统一资源定位符URL ； 接收单元，用于接收所述网络侧根据所述HTTP请求返回的所述图片的待渲染数据。
9.根据权利要求6至8中任一权利要求所述的装置，其特征在于，所装置还包括: 存储模块，用于将所述获取到的图片的待渲染数据存储到脚本文件中； 所述渲染模块，用于从所述脚本文件中读出所述图片的待渲染数据，并根据屏幕分辨率调整所述读出的图片的待渲染数据，在创建的画布中渲染所述调整后的图片的待渲染数据。
10.根据权利要求6所述的装置，其特征在于，所述调整模块，用于根据屏幕分辨率调整获取到的图片的分辨率，得到分辨率调整后的图片的待渲染数据，并将分辨率调整后的图片的待渲染数据作为调整后的所述图片的待渲染数据。
11.一种终端，其特征在于，所述终端包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令: 在网页中的图片的显示区域创建与所述显示区域大小相同的画布； 获取所述图片的待渲染数据，并根据屏幕分辨率调整获取到的图片的待渲染数据； 在创建的画布中渲染调 整后的所述图片的待渲染数据，在所述网页中显示所述图片。
【文档编号】G06F17/30GK103455571SQ201310362329
【公开日】2013年12月18日 申请日期:2013年8月19日 优先权日:2013年8月19日
【发明者】任远, 姚丽梅, 王宗妮 申请人:小米科技有限责任公司