CN104820690A - 一种对终端显示的图片进行适配的方法及其*** - Google Patents

一种对终端显示的图片进行适配的方法及其*** Download PDF

Info

Publication number
CN104820690A
CN104820690A CN201510198875.1A CN201510198875A CN104820690A CN 104820690 A CN104820690 A CN 104820690A CN 201510198875 A CN201510198875 A CN 201510198875A CN 104820690 A CN104820690 A CN 104820690A
Authority
CN
China
Prior art keywords
webpage
terminal
picture
access
address
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201510198875.1A
Other languages
English (en)
Inventor
陈本峰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Metong Cloud (beijing) Technology Co Ltd
Original Assignee
Metong Cloud (beijing) Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Metong Cloud (beijing) Technology Co Ltd filed Critical Metong Cloud (beijing) Technology Co Ltd
Priority to CN201510198875.1A priority Critical patent/CN104820690A/zh
Publication of CN104820690A publication Critical patent/CN104820690A/zh
Pending legal-status Critical Current

Links

Landscapes

  • Information Transfer Between Computers (AREA)

Abstract

本申请提供一种对终端显示的图片进行适配的方法及其***，该方法包括如下步骤：终端提交对网页的访问；获得访问终端的各项参数；抓取网页DOM，获取其中图片的地址；根据终端的参数处理网页中的图片，并对处理后的图片压缩。该方法可根据终端类型，自动产生适合请求的终端显示的图片，具有便于推广、无需数据迁移、内容实时自动更新、开发成本低、兼容性好等优点。

Description

一种对终端显示的图片进行适配的方法及其***
技术领域
本申请涉及图片处理领域，尤其涉及一种对终端显示的图片进行适配的方法及其***。
背景技术
随着通信技术的飞速发展，移动终端的便携性使其成为通信设备的主流，其普及率远远高于PC机。然而，在手机等移动设备上浏览传统的PC网站时，网站会等比例缩小，从而使得图片内容需要拖动滚动条才能看到其全貌，且图片本身较大，消耗流量较多，严重影响加载速度。这些因素都会导致移动端非常差的阅读体验。在移动互联网领域，有效的将传统互联网上丰富的内容，特别是图片内容，在移动设备上友好的展示给用户，成为移动互联网发展的过程的重要问题。即如何将图片和文字等内容更好的展示给用户，且适当减小图片大小，节省移动端流量，提高网站在移动端的用户体验，成为该领域中一个非常重要的课题。    
发明内容
有鉴于此，本申请提供一种对终端显示的图片进行适配的方法及其***，可根据终端参数自动调整图片大小。
本申请提供一种对终端显示的图片进行适配的方法，包括如下步骤：终端提交对网页的访问；获得访问终端的各项参数；抓取网页DOM，获取其中图片的地址；根据终端的参数处理网页中的图片，并对处理后的图片压缩。
其中获得访问终端的各项参数包括：当终端访问网页时，如果该网页预先***了可动态适配网页的代码，则该代码调用云端服务器上提供的服务，向终端发送信息，获得终端的各项参数。
其中在网页内***可动态适配网页的代码包括在网页的<head>标签之后***一行可动态适配网页的代码。
其中该方法还包括步骤：将该网页中图片的地址替换为处理并压缩后的网页图片的地址；将请求的网页返回给终端，终端根据调整后的网页的图片的地址获取所述处理后的压缩的网页图片。
进一步的，本申请还提供一种对终端显示的图片进行适配的***，包括：
终端：与服务器以及云端服务器通过网络进行通信，向服务器发送访问请求，访问存储在服务器上的网页；
服务器：其上存储网页，供终端访问；
云端服务器：包括如下部件:
            获取单元：获得访问终端的各项参数；
            转换单元：抓取网页DOM，获取其中图片的地址；
处理单元：根据终端的参数处理网页中的图片，并对处理后的图片压缩。
其中该获取单元进一步包括：参数提取单元：当终端访问网页时，如果该网页预先***了可动态适配网页的代码，则该代码调用云端服务器上的参数提取单元，由参数提取单元向终端发送信息，获得终端的各项参数；***单元：在网页的<head>标签之后***可动态适配网页的代码。
云端服务器进一步包括：适配单元：将该网页中图片的地址替换为处理单元处理并压缩后的网页图片的地址，以及将终端请求的网页返回给终端，终端根据调整后的网页的图片的地址从处理单元中获取所述处理后的压缩的网页图片。
由以上技术方案可见，本申请通过获得终端参数，自动调整网页中的图片尺寸和位置，从而可做到根据终端显示器的类型和显示分辨率自动适配网页中的内容特别是图片的目的。
通过本申请，可实现网页的动态适配，从而在无需二次开发的前提下，动态调整网页的呈现形式。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。
图1是本申请的***结构图；
图2是本申请云端服务器的结构图；
图3是本申请云端服务器中处理单元的结构图；
图4是本申请的方法流程图；
图5是使用本申请的适配方法转换后的网页的前后对比图。
具体实施方式
本申请在终端访问服务器中存储的网页时，根据终端的参数提供不同的页面图片加以显示。通过本申请，用户可在较短的响应时间内动态的获得适于终端显示的网页及其图片，从而获得更好的浏览体验。
当然，实施本申请的任一技术方案必不一定需要同时达到以上的所有优点。
为了使本领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都应当属于本申请保护的范围。
下面结合本申请附图进一步说明本申请具体实现。
本申请提供一种对终端显示的图片进行适配的方法及其***。
参见图1，该对终端显示的图片进行适配的***包括服务器1和多个终端2以及云端服务器3，其中服务器1可为各种类型的服务器，用于与多个终端2互联，其上存储网页内容，供与之连接的多个终端2访问。多个终端2可为各种类型的移动设备、以及可以与服务器1，云端服务器3通信的各种有线或无线终端等。云端服务器3提供根据终端的参数对图片进行适配的服务，可与服务器1以及终端2实现有线或无线的连接。具体的，该***的各个组成部件为：
终端2：与服务器1以及云端服务器3通过网络进行通信，向服务器1发送访问请求，访问存储在服务器1上的网页。
服务器1：其上存储网页，供各个终端访问。
云端服务器3，其具体构造如图2所示，包括：
获取单元201：获得访问终端的各项参数。
该获取单元201进一步包括图3所示的各部分：
***单元301：在网页内***可动态适配网页的代码。
通过在服务器1提供的网页上***代码，实现对云端服务器3上提供的各种服务的调用，这可通过多种***技术实现，例如服务器1主动请求，或云端服务器3推送，***方式例如可为在需要做适配的网页的源代码的<head></head>标签最开始的地方***一行可动态适配网页的代码。该代码实现对云端服务器上提供的各种适配服务的调用。
参数提取单元302：获得终端的各项参数。
当终端2访问服务器1上存储的网页时，如果该网页预先***了可动态适配网页的代码，则该网页首先调用云端服务器3的获取单元201中的参数提取单元302。参数提取单元302向终端2发送信息，获得终端2的各项参数，例如终端的屏幕尺寸、屏幕的分辨率、用户的清晰度设置、生产厂商名称、设备机型等等。
参见图2，该云端服务器3还包括转换单元202，其抓取网页DOM，获取其中图片的地址。
DOM为文档对象模型（Document Object Model，简称DOM），是W3C（万维网联盟）组织推荐的处理可扩展标志语言的标准编程接口。
由于HTML是一种格式化的语言，其中文本信息需要被放在HTML标签中，由标签提供对信息位置、显示方式等修饰。HTML格式文件中，在根标签下还具有〈head〉、〈body〉以及〈table〉等标签，这些标签由顶向下组成树状DOM。W3C DOM规范对HTML标签和文本内容有如下的规定：
●整个文档是一个文档节点
●每个HTML标签是一个元素节点
●包含在HTML元素中的文本是文本节点
●每一个HTML属性是一个属性节点
据此，网页DOM是由文本节点和标签节点组成的一个树状组织结构，根据这些标签生成网页DOM。在生成网页DOM的过程，抽取其中的图片地址信息，例如根据标签<img>中的src，提取图片地址。
进一步的，参见图2，该云端服务器包括：
处理单元203：根据终端的参数处理网页中的图片，并对处理后的图片压缩。该处理单元可根据网页中图片的信息，例如图片的类型、尺寸等，结合终端的各项参数，动态调整图片。
例如，根据图片的类型调整，即如果终端不支持该图片的类型，那么将终端不支持的图片类型转换成终端支持的格式，例如将PNG格式的图片转换为JPEG格式的图片。处理单元也可判断网页中图片的尺寸，是否与终端屏幕的显示尺寸相适配，根据终端屏幕的显示尺寸，动态调整图片的大小。
进一步的，参见图2，该云端服务器包括：
适配单元204：将该网页中图片的地址替换为处理单元203处理并压缩后的网页图片的地址；将终端2请求的网页返回给终端，终端2根据调整后的网页的图片的地址从处理单元203中获取所述处理后的压缩的网页图片。
以上结合图1-3介绍了对终端显示的图片进行适配的***，下面结合图4介绍对终端显示的图片进行适配的方法。
参见图4，该方法包括如下步骤：
S1、提交对网页的访问。
终端2访问存储在服务器1上的网页，如果该网页***了代码，可实现对云端服务器3上提供的各种服务的调用，则在终端访问***了代码的网页时，调用云端服务器3上的服务。这可通过多种***技术实现，例如服务器1主动请求，或云端服务器3推送，***方式例如可为在需要做适配的网页的源代码的<head></head>标签最开始的地方***一行可动态适配网页的代码。该代码实现对云端服务器上提供的各种适配服务的调用。
S2、获得访问终端的各项参数。
当终端2访问服务器1上存储的网页时，如果该网页预先***了可动态适配网页的代码，则该代码调用云端服务器上提供的服务，向终端2发送信息，获得终端2的各项参数，例如终端的屏幕尺寸、屏幕的分辨率、用户的清晰度设置、生产厂商名称、设备机型等等。
S3、抓取网页DOM，获取其中图片的地址。
DOM为文档对象模型（Document Object Model，简称DOM），是W3C（万维网联盟）组织推荐的处理可扩展标志语言的标准编程接口。
由于HTML是一种格式化的语言，其中文本信息需要被放在HTML标签中，由标签提供对信息位置、显示方式等修饰。HTML格式文件中，在根标签下还具有〈head〉、〈body〉以及〈table〉等标签，这些标签由顶向下组成树状DOM。W3C DOM规范对HTML标签和文本内容有如下的规定：
●整个文档是一个文档节点
●每个HTML标签是一个元素节点
●包含在HTML元素中的文本是文本节点
●每一个HTML属性是一个属性节点
据此，网页DOM是由文本节点和标签节点组成的一个树状组织结构，根据这些标签生成网页DOM。在生成网页DOM的过程，抽取其中的图片地址信息，例如根据标签<img>中的src，提取图片地址。
S4、根据终端的参数处理网页中的图片，并对处理后的图片压缩。
可根据网页中图片的信息，例如图片的类型、尺寸等，结合终端的各项参数，动态调整图片。
例如，根据图片的类型调整，即如果终端不支持该图片的类型，那么将终端不支持的图片类型转换成终端支持的格式，例如将PNG格式的图片转换为JPEG格式的图片。也可判断网页中图片的尺寸，是否与终端屏幕的显示尺寸相适配，根据终端屏幕的显示尺寸，动态调整图片的大小。
S5、将该网页中图片的地址替换为处理并压缩后的网页图片的地址。
S6、将请求的网页返回给终端，终端根据调整后的网页的图片的地址获取所述处理后的压缩的网页图片。
图5显示了使用本申请的方法转换后的网页图片显示的前后对比图，原网页在手机上直接加载时，存在网页图片显示过小的情况，使用该技术后，网页图片根据屏幕大小相应增大，但相应的使用图片压缩技术并对图片格式进行转换后，从而在提高网站加载速度，节省流量的基础上，提高客户阅读体验。
本领域的技术人员应明白，本申请的实施例可提供为方法、装置(设备)、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、装置(设备)和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (10)

1.一种对终端显示的图片进行适配的方法，包括如下步骤：
终端提交对网页的访问；
获得访问终端的各项参数；
抓取网页DOM，获取其中图片的地址；
根据终端的参数处理网页中的图片，并对处理后的图片压缩。
2.根据权利要求1所述的方法，其中获得访问终端的各项参数包括：当终端访问网页时，如果该网页预先***了可动态适配网页的代码，则该代码调用云端服务器上提供的服务，向终端发送信息，获得终端的各项参数。
3.根据权利要求2所述的方法，其中在网页内***可动态适配网页的代码包括在网页的<head>标签之后***一行可动态适配网页的代码。
4.根据权利要求1所述的方法，其中还包括步骤：将该网页中图片的地址替换为处理并压缩后的网页图片的地址。
5.据权利要求4所述的方法，其中还包括步骤：将请求的网页返回给终端，终端根据调整后的网页的图片的地址获取所述处理后的压缩的网页图片。
6.一种对终端显示的图片进行适配的***，包括：
终端：与服务器以及云端服务器通过网络进行通信，向服务器发送访问请求，访问存储在服务器上的网页；
服务器：其上存储网页，供终端访问；
云端服务器：包括如下部件:
            获取单元：获得访问终端的各项参数；
            转换单元：抓取网页DOM，获取其中图片的地址；
处理单元：根据终端的参数处理网页中的图片，并对处理后的图片压缩。
7.根据权利要求6所述的装置，其中该获取单元进一步包括：
参数提取单元：当终端访问网页时，如果该网页预先***了可动态适配网页的代码，则该代码调用云端服务器上的参数提取单元，由参数提取单元向终端发送信息，获得终端的各项参数。
8.根据权利要求7所述的动态适配装置，其中该获取单元进一步包括以下：
***单元：在网页的<head>标签之后***可动态适配网页的代码。
9.根据权利要求6所述的装置，其中云端服务器进一步包括：
适配单元：将该网页中图片的地址替换为处理单元处理并压缩后的网页图片的地址。
10.根据权利要求9所述的装置，其中适配单元进一步包括：
将终端请求的网页返回给终端，终端根据调整后的网页的图片的地址从处理单元中获取所述处理后的压缩的网页图片。
CN201510198875.1A 2015-04-24 2015-04-24 一种对终端显示的图片进行适配的方法及其*** Pending CN104820690A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510198875.1A CN104820690A (zh) 2015-04-24 2015-04-24 一种对终端显示的图片进行适配的方法及其***

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510198875.1A CN104820690A (zh) 2015-04-24 2015-04-24 一种对终端显示的图片进行适配的方法及其***

Publications (1)

Publication Number Publication Date
CN104820690A true CN104820690A (zh) 2015-08-05

Family

ID=53730985

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510198875.1A Pending CN104820690A (zh) 2015-04-24 2015-04-24 一种对终端显示的图片进行适配的方法及其***

Country Status (1)

Country Link
CN (1) CN104820690A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106484735A (zh) * 2015-09-01 2017-03-08 天脉聚源（北京）科技有限公司 一种网页图片自适应移动终端显示的方法和***

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1267276A1 (en) * 2001-06-12 2002-12-18 Telefonaktiebolaget L M Ericsson User selective reload of images
CN101150803A (zh) * 2007-10-24 2008-03-26 优视动景（北京）技术服务有限公司 微浏览器处理网络数据的方法、微浏览器及其服务器
CN101202755A (zh) * 2007-12-20 2008-06-18 腾讯科技（深圳）有限公司 一种移动终端的图片显示***、方法和装置
CN102929871A (zh) * 2011-08-08 2013-02-13 腾讯科技（深圳）有限公司 一种网页浏览方法、装置及移动终端
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1267276A1 (en) * 2001-06-12 2002-12-18 Telefonaktiebolaget L M Ericsson User selective reload of images
CN101150803A (zh) * 2007-10-24 2008-03-26 优视动景（北京）技术服务有限公司 微浏览器处理网络数据的方法、微浏览器及其服务器
CN101202755A (zh) * 2007-12-20 2008-06-18 腾讯科技（深圳）有限公司 一种移动终端的图片显示***、方法和装置
CN102929871A (zh) * 2011-08-08 2013-02-13 腾讯科技（深圳）有限公司 一种网页浏览方法、装置及移动终端
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106484735A (zh) * 2015-09-01 2017-03-08 天脉聚源（北京）科技有限公司 一种网页图片自适应移动终端显示的方法和***

Similar Documents

Publication Publication Date Title
CN107885848B (zh) 基于web技术的网页截屏方法
CN101789961B (zh) 一种用于移动通讯设备终端的图片缩放***及其应用方法
CN105975576B (zh) 终端内容适配显示方法、装置和终端
CN108932346B (zh) 电子白板内容的共享方法、装置及电子白板
CN103514241A (zh) 图片加载方法及***
CN103544253A (zh) 一种以瀑布流方式显示图片的实现方法及***
EP2953055A1 (en) Two-dimensional code processing method and terminal
CN102364460A (zh) 基于移动终端的页面自动放大方法和***
CN104423839A (zh) 浏览器资源显示方法和装置
CN103051652A (zh) 一种移动终端云计算发布平台
CN103177015A (zh) 网页图像展示方法和***
CN104965914A (zh) 一种页面显示方法及装置
CN105373545A (zh) 一种图片显示方法及装置
CN104572594A (zh) 动态pdf实时生成方法
CN102760157B (zh) 一种用于生成与移动终端相对应的发布信息的方法、装置与设备
CN105045587A (zh) 一种图片展示方法及装置
CN113382083A (zh) 一种网页截图方法和装置
CN103761253A (zh) 漫画显示***和漫画显示方法
WO2024104423A1 (zh) 图像处理方法、装置、电子设备及存储介质
CN113207006B (zh) 直播租房海报自动生成方法、装置、设备和存储介质
CN102209116A (zh) 一种获取网络电视节目信息的方法、装置以及电视机
JP2002049558A (ja) Ｗｅｂアクセス支援装置及びネットワークシステム
CN104580298B (zh) 文件上传处理方法及装置
CN110457264B (zh) 会议文件处理方法、装置、设备及计算机可读存储介质
CN104820690A (zh) 一种对终端显示的图片进行适配的方法及其***

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
EXSB Decision made by sipo to initiate substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20150805