CN104820690A - Method and system for adaptation of pictures displayed by terminals - Google Patents
Method and system for adaptation of pictures displayed by terminals Download PDFInfo
- 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
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The invention provides a method and a system for adaptation of pictures displayed by terminals. The method comprises the following steps that each terminal submits an access to a webpage; various parameters of the access terminal are obtained; a webpage DOM (Document Object Model) is captured and an address of each picture is obtained; and each picture in the webpage is processed according to the parameters of the terminal and the processed picture is compressed. According to the method, the pictures displayed by the terminals, which are suitable for requests, are automatically produced according to the terminal type, and the method has the advantages of convenience for popularization, no data migration, real-time automatic content updating, low development cost, good compatibility and the like.
Description
Technical field
The application relates to picture processing field, particularly relates to a kind of picture to terminal demonstration and carries out adaptive method and system thereof.
Background technology
Along with the develop rapidly of the communication technology, the portability of mobile terminal becomes the main flow of communication facilities, and its popularity rate is far away higher than PC.But, when the mobile devices such as mobile phone are browsed traditional PC website, website meeting scaled down, thus make image content need dragging scroll bar just can see its overall picture, and picture itself is comparatively large, consumed flow is more, has a strong impact on loading velocity.These factors all can cause the reading experience of the non-constant in mobile terminal.In mobile Internet field, the content effectively enriched on the net by legacy interconnect, particularly image content, friendlyly on the mobile apparatus show user, becomes the major issue of the process of mobile Internet development.Namely how the content such as picture and word is better showed user, and suitably reduce picture size, save mobile terminal flow, improve the Consumer's Experience of website in mobile terminal, become a very important problem in this field.
Summary of the invention
In view of this, the application provides a kind of picture to terminal demonstration to carry out adaptive method and system thereof, automatically can adjust picture size according to terminal parameter.
The application provides a kind of picture to terminal demonstration to carry out adaptive method, comprises the steps: that terminal submits the access to webpage to; Obtain the parameters of access terminal; Capture webpage DOM, obtain the address of wherein picture; According to the picture in the parameter processing webpage of terminal, and to the picture compression after process.
The parameters wherein obtaining access terminal comprises: when terminal access webpage, if this webpage inserts the code of the adaptive webpage of dynamic in advance, the service then this code call cloud server provided, sends information to terminal, obtains the parameters of terminal.
The code wherein inserting the adaptive webpage of dynamic in webpage inserts the code of the adaptive webpage of a line dynamic after being included in the <head> label of webpage.
Wherein the method also comprises step: replaced with the address of picture in this webpage and process and the address of Web page picture after compressing; The webpage of request is returned to terminal, the Web page picture of the compression after terminal process according to the address acquisition of the picture of the webpage after adjustment.
Further, the application also provides a kind of picture to terminal demonstration to carry out adaptive system, comprising:
Terminal: communicated by network with server and cloud server, sends request of access to server, and access stores webpage on the server;
Server: it stores webpage, for terminal access;
Cloud server: comprise as lower component:
Acquiring unit: the parameters obtaining access terminal;
Converting unit: capture webpage DOM, obtain the address of wherein picture;
Processing unit: according to the picture in the parameter processing webpage of terminal, and to the picture compression after process.
Wherein this acquiring unit comprises further: parameter extraction unit: when terminal access webpage, if this webpage inserts the code of the adaptive webpage of dynamic in advance, parameter extraction unit then on this code call cloud server, send information by parameter extraction unit to terminal, obtain the parameters of terminal; Plug-in unit: the code inserting the adaptive webpage of dynamic after the <head> label of webpage.
Cloud server comprises further: adaptation unit: the address of picture in this webpage is replaced with processing unit processes and the address of Web page picture after compression, and the webpage of terminal request is returned to terminal, terminal obtains the Web page picture of the compression after described process according to the address of the picture of the webpage after adjustment from processing unit.
From above technical scheme, the application by obtaining terminal parameter, the dimension of picture automatically in adjustment webpage and position, thus the object according to the particularly picture of the content in the type of terminal display and display resolution automatic adaptation webpage can be accomplished.
By the application, the dynamic adaptation of webpage can be realized, thus without the need under the prerequisite of secondary development, the appearance form of dynamic conditioning webpage.
Accompanying drawing explanation
In order to be illustrated more clearly in the embodiment of the present application or technical scheme of the prior art, be briefly described to the accompanying drawing used required in embodiment or description of the prior art below, apparently, the accompanying drawing that the following describes is only some embodiments recorded in the application, for those of ordinary skill in the art, other accompanying drawing can also be obtained according to these accompanying drawings.
Fig. 1 is the system construction drawing of the application;
Fig. 2 is the structural drawing of the application's cloud server;
Fig. 3 is the structural drawing of processing unit in the application's cloud server;
Fig. 4 is the method flow diagram of the application;
Fig. 5 is the front and back comparison diagram of the webpage after using the adaptation method of the application to change.
Embodiment
During the webpage that the application stores in terminal access server, different page pictures is provided to be shown according to the parameter of terminal.By the application, user can obtain the webpage and picture thereof that are suitable for terminal demonstration dynamically within the shorter response time, thus obtains better viewing experience.
Certainly, the arbitrary technical scheme implementing the application must not necessarily need to reach above all advantages simultaneously.
Technical scheme in the application is understood better in order to make those skilled in the art, below in conjunction with the accompanying drawing in the embodiment of the present application, technical scheme in the embodiment of the present application is clearly and completely described, obviously, described embodiment is only some embodiments of the present application, instead of whole embodiments.Based on the embodiment in the application, the every other embodiment that those of ordinary skill in the art obtain, all should belong to the scope of the application's protection.
The application's specific implementation is further illustrated below in conjunction with illustrations.
The application provides a kind of picture to terminal demonstration to carry out adaptive method and system thereof.
See Fig. 1, this carries out adaptive system to the picture of terminal demonstration and comprises server 1 and multiple terminal 2 and cloud server 3, and wherein server 1 can be various types of server, for interconnected with multiple terminal 2, it stores web page contents, accesses for the multiple terminals 2 be attached thereto.Multiple terminal 2 can be various types of mobile device and can with server 1, cloud server 3 communicate various wired or wireless terminals etc.Cloud server 3 provides and carries out adaptive service according to the parameter of terminal to picture, can realize wired or wireless connection with server 1 and terminal 2.Concrete, each building block of this system is:
Terminal 2: communicated by network with server 1 and cloud server 3, send request of access to server 1, access stores webpage on the server.
Server 1: it stores webpage, for each terminal access.
Cloud server 3, it specifically constructs as shown in Figure 2, comprising:
Acquiring unit 201: the parameters obtaining access terminal.
This acquiring unit 201 comprises each several part shown in Fig. 3 further:
Plug-in unit 301: the code inserting the adaptive webpage of dynamic in webpage.
Code is inserted by the webpage that provides at server 1, realize calling the various services that cloud server 3 provides, this realizes by multiple insertion technology, such as server 1 active request, or cloud server 3 pushes, inserted mode such as can be the code inserting the adaptive webpage of a line dynamic in the place needing the <head></headGrea tT.GreaT.GT label of the source code doing adaptive webpage to start most.This codes implement calls the various adaptation services that cloud server provides.
Parameter extraction unit 302: the parameters obtaining terminal.
When the webpage that terminal 2 access services device 1 stores, if this webpage inserts the code of the adaptive webpage of dynamic in advance, then first this webpage calls the parameter extraction unit 302 in the acquiring unit 201 of cloud server 3.Parameter extraction unit 302 sends information to terminal 2, obtains the parameters of terminal 2, the sharpness setting of the screen size of such as terminal, the resolution of screen, user, production firm's title, equipment type etc.
See Fig. 2, this cloud server 3 also comprises converting unit 202, and it captures webpage DOM, obtains the address of wherein picture.
DOM is DOM Document Object Model (Document Object Model, be called for short DOM), is W3C(World Wide Web Consortium) standard programming interface of the process easily extensible markup language of Organisation recommendations.
Due to the language that HTML is a kind of format, wherein text message needs to be placed in html tag, is provided modifications such as information position, display modes by label.In html format file, under root label, also have the label such as < head >, < body > and < table >, these labels top down form tree-shaped DOM.W3C DOM specification has following regulation to html tag and content of text:
● whole document is a document node
● each html tag is a node element
● the text be included in html element element is text node
● each html attribute is an attribute node
Accordingly, the tree-shaped institutional framework that webpage DOM is made up of text node and label node, according to these label generating web pages DOM.In the process of generating web page DOM, extract picture address information wherein, such as, according to the src in label <img>, extract picture address.
Further, see Fig. 2, this cloud server comprises:
Processing unit 203: according to the picture in the parameter processing webpage of terminal, and to the picture compression after process.This processing unit can according to the information of picture in webpage, the type, size etc. of such as picture, in conjunction with the parameters of terminal, and dynamic conditioning picture.
Such as, the type according to picture adjusts, if namely terminal does not support the type of this picture, so the picture/mb-type that terminal is not supported is converted to the form that terminal is supported, such as, the picture of PNG form is converted to the picture of jpeg format.Whether processing unit also can judge the size of picture in webpage, suitable with the display size of terminal screen, according to the display size of terminal screen, and the size of dynamic conditioning picture.
Further, see Fig. 2, this cloud server comprises:
Adaptation unit 204: the address of picture in this webpage is replaced with processing unit 203 and process and the address of Web page picture after compressing; The webpage that terminal 2 is asked is returned to terminal, and terminal 2 obtains the Web page picture of the compression after described process according to the address of the picture of the webpage after adjustment from processing unit 203.
Above composition graphs 1-3 describes and carries out adaptive system to the picture of terminal demonstration, carries out adaptive method below in conjunction with Fig. 4 introduction to the picture of terminal demonstration.
See Fig. 4, the method comprises the steps:
S1, submit access to webpage to.
Terminal 2 accesses the webpage stored on the server, if this webpage inserts code, can realize calling the various services that cloud server 3 provides, then, when terminal access inserts the webpage of code, call the service on cloud server 3.This realizes by multiple insertion technology, such as server 1 active request, or cloud server 3 pushes, inserted mode such as can be the code inserting the adaptive webpage of a line dynamic in the place needing the <head></headGrea tT.GreaT.GT label of the source code doing adaptive webpage to start most.This codes implement calls the various adaptation services that cloud server provides.
The parameters of S2, acquisition access terminal.
When the webpage that terminal 2 access services device 1 stores, if this webpage inserts the code of the adaptive webpage of dynamic in advance, the service then this code call cloud server provided, information is sent to terminal 2, obtain the parameters of terminal 2, the sharpness setting of the screen size of such as terminal, the resolution of screen, user, production firm's title, equipment type etc.
S3, crawl webpage DOM, obtain the address of wherein picture.
DOM is DOM Document Object Model (Document Object Model, be called for short DOM), is W3C(World Wide Web Consortium) standard programming interface of the process easily extensible markup language of Organisation recommendations.
Due to the language that HTML is a kind of format, wherein text message needs to be placed in html tag, is provided modifications such as information position, display modes by label.In html format file, under root label, also have the label such as < head >, < body > and < table >, these labels top down form tree-shaped DOM.W3C DOM specification has following regulation to html tag and content of text:
● whole document is a document node
● each html tag is a node element
● the text be included in html element element is text node
● each html attribute is an attribute node
Accordingly, the tree-shaped institutional framework that webpage DOM is made up of text node and label node, according to these label generating web pages DOM.In the process of generating web page DOM, extract picture address information wherein, such as, according to the src in label <img>, extract picture address.
S4, according to the picture in the parameter processing webpage of terminal, and to process after picture compression.
Can according to the information of picture in webpage, the type, size etc. of such as picture, in conjunction with the parameters of terminal, dynamic conditioning picture.
Such as, the type according to picture adjusts, if namely terminal does not support the type of this picture, so the picture/mb-type that terminal is not supported is converted to the form that terminal is supported, such as, the picture of PNG form is converted to the picture of jpeg format.Also the size of picture in webpage can be judged, whether suitable with the display size of terminal screen, according to the display size of terminal screen, the size of dynamic conditioning picture.
S5, the address of picture in this webpage replaced with process and the address of Web page picture after compressing.
S6, the webpage of request is returned to terminal, the Web page picture of the compression after terminal process according to the address acquisition of the picture of the webpage after adjustment.
Fig. 5 shows the front and back comparison diagram of the Web page picture display after the method migration using the application, when former webpage directly loads on mobile phone, there is Web page picture and show too small situation, after using this technology, Web page picture according to the corresponding increase of screen size, but corresponding uses picture compression technology and after changing picture format, thus at raising website loading velocity, save on the basis of flow, improve client's reading experience.
It will be understood by those skilled in the art that the embodiment of the application can be provided as method, device (equipment) or computer program.Therefore, the application can adopt the form of complete hardware embodiment, completely software implementation or the embodiment in conjunction with software and hardware aspect.And the application can adopt in one or more form wherein including the upper computer program implemented of computer-usable storage medium (including but not limited to magnetic disk memory, CD-ROM, optical memory etc.) of computer usable program code.
The application describes with reference to according to the process flow diagram of the method for the embodiment of the present application, device (equipment) and computer program and/or block scheme.Should understand can by the combination of the flow process in each flow process in computer program instructions realization flow figure and/or block scheme and/or square frame and process flow diagram and/or block scheme and/or square frame.These computer program instructions can being provided to the processor of multi-purpose computer, special purpose computer, Embedded Processor or other programmable data processing device to produce a machine, making the instruction performed by the processor of computing machine or other programmable data processing device produce device for realizing the function of specifying in process flow diagram flow process or multiple flow process and/or block scheme square frame or multiple square frame.
These computer program instructions also can be stored in can in the computer-readable memory that works in a specific way of vectoring computer or other programmable data processing device, the instruction making to be stored in this computer-readable memory produces the manufacture comprising command device, and this command device realizes the function of specifying in process flow diagram flow process or multiple flow process and/or block scheme square frame or multiple square frame.
These computer program instructions also can be loaded in computing machine or other programmable data processing device, make on computing machine or other programmable devices, to perform sequence of operations step to produce computer implemented process, thus the instruction performed on computing machine or other programmable devices is provided for the step realizing the function of specifying in process flow diagram flow process or multiple flow process and/or block scheme square frame or multiple square frame.
Although described the preferred embodiment of the application, those skilled in the art once obtain the basic creative concept of cicada, then can make other change and amendment to these embodiments.So claims are intended to be interpreted as comprising preferred embodiment and falling into all changes and the amendment of the application's scope.Obviously, those skilled in the art can carry out various change and modification to the application and not depart from the spirit and scope of the application.Like this, if these amendments of the application and modification belong within the scope of the application's claim and equivalent technologies thereof, then the application is also intended to comprise these change and modification.
Claims (10)
1. an adaptive method is carried out to the picture of terminal demonstration, comprise the steps:
Terminal submits the access to webpage to;
Obtain the parameters of access terminal;
Capture webpage DOM, obtain the address of wherein picture;
According to the picture in the parameter processing webpage of terminal, and to the picture compression after process.
2. method according to claim 1, the parameters wherein obtaining access terminal comprises: when terminal access webpage, if this webpage inserts the code of the adaptive webpage of dynamic in advance, the service then this code call cloud server provided, send information to terminal, obtain the parameters of terminal.
3. method according to claim 2, the code wherein inserting the adaptive webpage of dynamic in webpage inserts the code of the adaptive webpage of a line dynamic after being included in the <head> label of webpage.
4. method according to claim 1, wherein also comprises step: replaced with the address of picture in this webpage and process and the address of Web page picture after compressing.
5. according to method according to claim 4, wherein also comprise step: the webpage of request is returned to terminal, the Web page picture of the compression after terminal process according to the address acquisition of the picture of the webpage after adjustment.
6. an adaptive system is carried out to the picture of terminal demonstration, comprising:
Terminal: communicated by network with server and cloud server, sends request of access to server, and access stores webpage on the server;
Server: it stores webpage, for terminal access;
Cloud server: comprise as lower component:
Acquiring unit: the parameters obtaining access terminal;
Converting unit: capture webpage DOM, obtain the address of wherein picture;
Processing unit: according to the picture in the parameter processing webpage of terminal, and to the picture compression after process.
7. device according to claim 6, wherein this acquiring unit comprises further:
Parameter extraction unit: when terminal access webpage, if this webpage inserts the code of the adaptive webpage of dynamic in advance, parameter extraction unit then on this code call cloud server, sends information by parameter extraction unit to terminal, obtains the parameters of terminal.
8. dynamic adaptation device according to claim 7, wherein this acquiring unit comprises following further:
Plug-in unit: the code inserting the adaptive webpage of dynamic after the <head> label of webpage.
9. device according to claim 6, wherein cloud server comprises further:
Adaptation unit: the address of picture in this webpage is replaced with processing unit processes and the address of Web page picture after compression.
10. device according to claim 9, wherein adaptation unit comprises further:
The webpage of terminal request is returned to terminal, and terminal obtains the Web page picture of the compression after described process according to the address of the picture of the webpage after adjustment from processing unit.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510198875.1A CN104820690A (en) | 2015-04-24 | 2015-04-24 | Method and system for adaptation of pictures displayed by terminals |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510198875.1A CN104820690A (en) | 2015-04-24 | 2015-04-24 | Method and system for adaptation of pictures displayed by terminals |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN104820690A true CN104820690A (en) | 2015-08-05 |
Family
ID=53730985
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510198875.1A Pending CN104820690A (en) | 2015-04-24 | 2015-04-24 | Method and system for adaptation of pictures displayed by terminals |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104820690A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106484735A (en) * | 2015-09-01 | 2017-03-08 | 天脉聚源（北京）科技有限公司 | The method and system that a kind of Web page picture self adaptation mobile terminal shows |
Citations (5)
| 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 (en) * | 2007-10-24 | 2008-03-26 | 优视动景（北京）技术服务有限公司 | Method for micro-browser to process network data, micro-browser and its server |
| CN101202755A (en) * | 2007-12-20 | 2008-06-18 | 腾讯科技（深圳）有限公司 | System, method and device for displaying picture of mobile terminal |
| CN102929871A (en) * | 2011-08-08 | 2013-02-13 | 腾讯科技（深圳）有限公司 | Webpage browsing method and device and mobile terminal |
| CN103412928A (en) * | 2013-08-16 | 2013-11-27 | 北京乐动卓越科技有限公司 | Method and device for realizing browser page intelligent response-type layout on mobile terminal |
-
2015
- 2015-04-24 CN CN201510198875.1A patent/CN104820690A/en active Pending
Patent Citations (5)
| 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 (en) * | 2007-10-24 | 2008-03-26 | 优视动景（北京）技术服务有限公司 | Method for micro-browser to process network data, micro-browser and its server |
| CN101202755A (en) * | 2007-12-20 | 2008-06-18 | 腾讯科技（深圳）有限公司 | System, method and device for displaying picture of mobile terminal |
| CN102929871A (en) * | 2011-08-08 | 2013-02-13 | 腾讯科技（深圳）有限公司 | Webpage browsing method and device and mobile terminal |
| CN103412928A (en) * | 2013-08-16 | 2013-11-27 | 北京乐动卓越科技有限公司 | Method and device for realizing browser page intelligent response-type layout on mobile terminal |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106484735A (en) * | 2015-09-01 | 2017-03-08 | 天脉聚源（北京）科技有限公司 | The method and system that a kind of Web page picture self adaptation mobile terminal shows |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107885848B (en) | Webpage screen capturing method based on web technology | |
| CN104820589B (en) | A kind of method and its device of dynamic adaptation webpage | |
| CN101789961B (en) | Picture scaling system used for terminal of mobile communication equipment and application method thereof | |
| CN105975576B (en) | Terminal content adaptive display method and device and terminal | |
| CN108932346B (en) | Electronic whiteboard content sharing method and device and electronic whiteboard | |
| CN103514241A (en) | Image loading method and system | |
| CN103544253A (en) | Implementation method and system for displaying images in waterfall flow manner | |
| EP2953055A1 (en) | Two-dimensional code processing method and terminal | |
| CN102364460A (en) | Automatic page amplification method and system based on mobile terminal | |
| CN104616263A (en) | Image processing method and device | |
| CN104423839A (en) | Browser resource display method and device | |
| CN113382083B (en) | Webpage screenshot method and device | |
| CN103051652A (en) | Mobile terminal cloud commuting delivery platform | |
| CN103177015A (en) | Method and system for webpage image presentation | |
| CN104965914A (en) | Page display method and apparatus | |
| CN105373545A (en) | Picture display method and device | |
| CN104572594A (en) | Real-time generation method of dynamic PDF (portable document format) documents | |
| CN102760157B (en) | A kind of for generating the method that release news, device and the equipment corresponding with mobile terminal | |
| CN105045587A (en) | Picture display method and apparatus | |
| CN106375454A (en) | Method and system for uploading file by scanning graphic identifier | |
| WO2024104423A1 (en) | Image processing method and apparatus, electronic device, and storage medium | |
| CN113207006B (en) | Method, device, equipment and storage medium for automatically generating live broadcast renting house poster | |
| CN102209116A (en) | Method and device for acquiring Internet protocol television program information, and television | |
| JP2002049558A (en) | Web ACCESS SUPPORT DEVICE AND NETWORK SYSTEM | |
| CN110457264B (en) | Conference file processing method, device, equipment and computer readable storage medium |
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 |