CN107885848B - Webpage screen capturing method based on web technology - Google Patents
Webpage screen capturing method based on web technology Download PDFInfo
- Publication number
- CN107885848B CN107885848B CN201711111579.9A CN201711111579A CN107885848B CN 107885848 B CN107885848 B CN 107885848B CN 201711111579 A CN201711111579 A CN 201711111579A CN 107885848 B CN107885848 B CN 107885848B
- Authority
- CN
- China
- Prior art keywords
- html
- canvas
- html element
- program interface
- calling
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Abstract
The invention discloses a web page screen capturing method based on a web technology, which comprises the following steps: calling a program interface of a web page browser to acquire each HTML element of a webpage to be intercepted; calling a browser program interface to analyze the attribute of each HTML element, and storing the analyzed attribute into an ordered HTML element attribute list; calling a browser program interface to create an HTML canvas; calling a browser program interface to circularly scan an HTML element attribute list, and drawing HTML attribute contents in the HTML element attribute list onto canvas; calling a program interface of the canvas to convert and encode the canvas which is drawn into a base64 character string and store the character string; the user is guided to download the canvas by adding buttons on the page. The method has the characteristics of not depending on other tools and solving the technical problem that the webpage screenshot depends on a third-party tool.
Description
Technical Field
The invention relates to the field of web design, in particular to a screen capturing method based on a web page.
Background
The common web page screen capturing technology saves the visual frame and enables the user to cut according to the requirement, and at the moment, an additional tool is needed to complete the task. If the user does not have a suitable screen capture tool, the user's goal cannot be reached.
Common web pages are provided with scroll bars to display contents in a scrolling mode, at the moment, the current visual screen cannot display all contents, a user cannot make a screen containing the contents of the whole page at one time, and captured pictures cannot easily keep the definition of original pictures and have distortion to a certain degree.
Aiming at the problems, the current method generally adopts server-side rendering, but the burden of the server is undoubtedly increased, and full-screen webpage interception is also realized by a third-party plug-in of a part of browsers, so that the use cost is high, and the integration is difficult. At present, no effective solution is available.
Disclosure of Invention
The invention aims to overcome the defect that the current webpage screen capturing depends on a third-party screen capturing tool in the prior art, and provides a webpage screen capturing method based on a web technology.
In order to achieve the purpose, the invention adopts the following technical scheme:
a webpage screen capturing method based on web technology comprises the following steps:
(1-1) calling a program interface of a web page browser to acquire each HTML element of a webpage to be intercepted;
(1-2) calling a browser program interface to analyze the attribute of each HTML element, if the current HTML element is detected to contain a sub HTML element, continuing to analyze the sub HTML element after the current HTML element is analyzed, and continuously repeating the current analysis process until all the HTML elements and the sub HTML elements are analyzed, and storing the analyzed attribute as an ordered HTML element attribute list;
(1-3) calling a browser program interface to create an HTML canvas;
(1-4) calling a browser program interface to circularly scan an HTML element attribute list, wherein a picture resource link url is arranged in the HTML element attribute list, the picture resource link url calls the browser program interface to send a network request to load a picture x.jpg, and after the resource loading is finished, the HTML attribute content in the HTML element attribute list is drawn to canvas by using canvas drawing rules;
(1-5) calling a program interface of the canvas to convert and encode the canvas which is drawn into a base64 character string and store the character string to obtain the canvas in the form of the character string;
(1-6) the user is guided to download the canvas by adding buttons on the page, and when the user clicks the button, the canvas is saved in the form of pictures on the local storage device by using the browser.
The content used by the invention is all from the elements of the current webpage, and does not need to depend on other tools, thereby solving the technical problem that the webpage screenshot depends on a third-party tool. Furthermore, the picture intercepted according to the embodiment of the invention can contain all or required contents of the webpage to be intercepted, and the dependence of the current screen-intercepting tool on the visual area of the screen is solved. Furthermore, the picture captured by the embodiment of the invention can highly restore the picture quality. Furthermore, the pictures intercepted by the invention can be stored only by texts, thus saving the storage space of the storage equipment and being beneficial to propagation.
Preferably, there are 4 HTML elements, which are div element, canvas element, image element, and ul element.
Preferably, the attributes of the HTML element include a background color, a background picture, a position, text information, a text style of the element, and a border attribute of the element.
Preferably, the HTML element attribute list includes a background color, a width of a border, a text of a HTML element of a color of a border line, a text font, a width of the HTML element, a height of the HTML element, a distance of the HTML element from a left border of the screen, a distance of the HTML element from a border on the screen, a background of the HTML element, and an address of the background.
Preferably, the following steps are further included between the steps (1-4) and (1-5):
in order to ensure that the copyright of the picture is exported, the copyright watermark is drawn according to the canvas drawing rule.
Preferably, each HTML element attribute list includes attribute contents of two HTML elements.
Therefore, the invention has the following beneficial effects: other tools are not needed, and the technical problem that webpage screen capturing depends on a third-party tool is solved; the picture intercepted by the method can contain all or required contents of the webpage to be intercepted, and the dependence of the current screen-intercepting tool on the visual area of the screen is solved; the picture intercepted by the method can highly restore the picture quality; the picture intercepted by the invention can be stored only by text, thus saving the storage space and being beneficial to propagation.
Drawings
FIG. 1 is a flow chart of the present invention.
Detailed Description
The invention is further described with reference to the following figures and detailed description.
The embodiment shown in fig. 1 is a web page screen capturing method based on web technology, comprising the following steps:
1. calling a program interface of a web page browser to obtain each HTML (HyperText markup Language) element of a web page needing to be intercepted, wherein the HTML element comprises a div element, a canvas element, an image element and an ul element, the div element is a web page area isolation mark and is used for placing a problem, an image and a table, the canvas element is an HTML mark element for drawing a graphic image by using a javascript programming Language, the image element is a mark for placing a picture on the web page, and the ul is a list mark element.
2. And calling a browser program interface to analyze the attributes of the HTML elements acquired in the step 1, wherein the attributes of the HTML elements comprise background colors, background pictures, positions, text information, text styles of the elements and border attributes of the elements. If the browser program interface is called to detect that the HTML element comprises the sub HTML element, the sub HTML element is continuously analyzed after the current HTML element is analyzed, the current analysis process is continuously repeated until all the HTML elements and the sub HTML elements are analyzed, the attribute which is analyzed is stored as an ordered HTML element attribute list, and the format of the HTML element attribute list is [ { background: '# fff', border: 'lpx solid red', 'fontSize': '14 px', text: 'text', width: '20 px', height: '10 px', left: '20 px', top: '20 px' }, { backsground: '# fff', background image: 'url (x.jpg)', border: ' lpx solid red ' } ', wherein the content of each HTML element after the attribute resolution is completed is stored by a pair of braces { }, and the collection of all element attributes is stored by a middle brace [ ]. The list format of the present embodiment holds the attributes of two HTML elements, background: '# fff' indicates that the background color of the HTML element is white, border: 'lpx solid red' indicates that the frame width of the HTML element is 1 pixel, the color of the frame line is a solid line, the color of the frame is red, text: 'text' denotes that the text of the HTML element is text, 'fontSize': '14 px' denotes a text font size of 14 pixels, width: '20 px', height: '10 px' indicates that the HTML element has a width of 20 pixels, a height of 10 pixels, left: '20 px', top: '20 px' indicates that the distance of the HTML element from the left border of the screen is 20 pixels, the distance from the upper border of the screen is 20 pixels, background image: 'url (x.jpg)' indicates that the background of the element is a picture and the address of the picture is url (x.jpg).
3. A browser program interface is invoked to create an HTML (HyperText Markup Language) canvas.
4. Calling a browser program interface to circularly scan an HTML element attribute list, wherein a picture resource link url (x.jpg) is arranged in the list, calling the browser program interface to send a network request to load the picture x.jpg, after the resource loading is finished, drawing the HTML attribute content on canvas by using a canvas drawing rule, in the embodiment, a first element in the attribute list draws a graph with the width of 20 pixels, the height of 20 pixels, the background color of white, the text of test, the text size of 14 pixels and the frame of a red solid line of 1 pixel according to the drawing rule, and sequentially drawing the content in the attribute list one by one according to the canvas drawing rule according to the process, wherein the canvas drawing rule refers to a method for calling the canvas program interface of the browser to draw the graph according to the user requirements. In order to ensure the copyright of the picture derived from the picture in the process, the copyright watermark can be drawn according to canvas drawing rules.
5. And calling a program interface of the canvas to convert the content drawn in the step 4 into a character string coded by base64 for storage.
6. And saving the content in the step 5 to a local storage device in a picture form by using a browser when a user clicks the button by adding the button on the page, such as "< button > downloading a current page screenshot </button >. The storage device comprises a medium with a storage function, such as a U disk, a read-only memory, a mobile hard disk and the like.
The invention provides a method for screen capture of a web page, which is to be noted that the steps shown in the flow chart of the figure can be executed in a computer system capable of executing the instructions, and in some cases, the sequence of the parts in the flow chart can be adjusted.
It should be understood that this example is for illustrative purposes only and is not intended to limit the scope of the present invention. Further, it should be understood that various changes or modifications of the present invention may be made by those skilled in the art after reading the teaching of the present invention, and such equivalents may fall within the scope of the present invention as defined in the appended claims.
Claims (4)
1. A webpage screen capturing method based on web technology is characterized by comprising the following steps:
(1-1) calling a program interface of a web page browser to acquire each HTML element of a webpage to be intercepted; (1-2) calling a browser program interface to analyze the attribute of each HTML element, if the current HTML element is detected to contain a sub HTML element, continuing to analyze the sub HTML element after the current HTML element is analyzed, and continuously repeating the current analysis process until all the HTML elements and the sub HTML elements are analyzed, and storing the analyzed attribute as an ordered HTML element attribute list; the number of HTML elements is 4, namely a div element, a canvas element, an image element and an ul element; the attributes of the HTML elements comprise background color, background pictures, positions, text information, text styles of the elements and border attributes of the elements;
(1-3) calling a browser program interface to create an HTML canvas;
(1-4) calling a browser program interface to circularly scan an HTML element attribute list, wherein a picture resource link url is arranged in the HTML element attribute list, the picture resource link url calls the browser program interface to send a network request to load a picture x.jpg, and after the resource loading is finished, the HTML attribute content in the HTML element attribute list is drawn to canvas by using canvas drawing rules;
(1-5) calling a program interface of the canvas to convert and encode the canvas which is drawn into a base64 character string and store the character string to obtain the canvas in the form of the character string;
(1-6) the user is guided to download the canvas by adding buttons on the page, and when the user clicks the button, the canvas is saved in the form of pictures on the local storage device by using the browser.
2. The web page screen shot method based on web technology as claimed in claim 1, wherein the HTML element attribute list includes background color, border width, text of HTML element in the color of border line, text font, width of HTML element, height of HTML element, distance of HTML element from left border of screen, distance of HTML element from border on screen, background of HTML element, address of background.
3. The web page screen capturing method based on web technology as claimed in claim 1, wherein the steps (1-4) and (1-5) further comprise the following steps:
in order to ensure that the copyright of the picture is exported, the copyright watermark is drawn according to the canvas drawing rule.
4. The web page screen capturing method based on the web technology as claimed in claim 1, 2 or 3, wherein each HTML element attribute list includes attribute contents of two HTML elements.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711111579.9A CN107885848B (en) | 2017-11-10 | 2017-11-10 | Webpage screen capturing method based on web technology |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711111579.9A CN107885848B (en) | 2017-11-10 | 2017-11-10 | Webpage screen capturing method based on web technology |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107885848A CN107885848A (en) | 2018-04-06 |
| CN107885848B true CN107885848B (en) | 2020-10-16 |
Family
ID=61780115
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711111579.9A Active CN107885848B (en) | 2017-11-10 | 2017-11-10 | Webpage screen capturing method based on web technology |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107885848B (en) |
Families Citing this family (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108595304B (en) * | 2018-04-19 | 2022-12-27 | 腾讯科技（深圳）有限公司 | Webpage monitoring method and device |
| CN108959509A (en) * | 2018-06-27 | 2018-12-07 | 中国建设银行股份有限公司 | Webpage watermark processing method, device and electronic equipment |
| CN109284045B (en) * | 2018-09-13 | 2021-11-05 | 武汉轻工大学 | Element-based screenshot method and device based on browser plug-in |
| CN109327727B (en) * | 2018-11-20 | 2020-11-27 | 网宿科技股份有限公司 | Live stream processing method in WebRTC and stream pushing client |
| CN111223032A (en) * | 2018-11-23 | 2020-06-02 | 浙江大学 | Watermark embedding method, watermark extracting method, watermark embedding device, watermark extracting equipment and data processing method |
| CN109948123B (en) * | 2018-11-27 | 2023-06-02 | 创新先进技术有限公司 | Image merging method and device |
| CN109783759A (en) * | 2019-01-15 | 2019-05-21 | 北京智融网络科技有限公司 | Page screenshot automatic generating method, equipment and readable storage medium storing program for executing |
| CN109783102B (en) * | 2019-01-18 | 2022-04-12 | 北京城市网邻信息技术有限公司 | Method, device, equipment and storage medium for generating Canvas in applet |
| CN112579947A (en) * | 2019-09-29 | 2021-03-30 | 北京国双科技有限公司 | Webpage element graph intercepting method and device and electronic equipment |
| CN111309671B (en) * | 2019-12-04 | 2023-01-31 | 珠海派诺科技股份有限公司 | Method and device for exporting PDF (Portable document Format) from web report and storage medium |
| CN111694493B (en) * | 2020-06-08 | 2022-05-31 | 杭州有赞科技有限公司 | Webpage screenshot method, computer equipment and readable storage medium |
| CN112306619A (en) * | 2020-12-02 | 2021-02-02 | 广州橙行智动汽车科技有限公司 | Screenshot method and device |
| CN112784202B (en) * | 2021-02-03 | 2022-10-04 | 中国电子科技集团公司第二十八研究所 | Method for improving definition of webpage screenshot based on WEB technology |
| CN115809387A (en) * | 2022-11-29 | 2023-03-17 | 四川虹魔方网络科技有限公司 | Webpage element screenshot realization method based on SVG |
| CN117076811A (en) * | 2023-10-13 | 2023-11-17 | 腾讯科技（深圳）有限公司 | Webpage export method, device, equipment and storage medium |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN104965881A (en) * | 2015-06-12 | 2015-10-07 | 北京奇虎科技有限公司 | Method and device for extracting selected area from page |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| PL395376A1 (en) * | 2011-06-22 | 2013-01-07 | Google Inc. | Rendering approximate webpage screenshot client-side |
| CN102521284B (en) * | 2011-11-28 | 2015-04-29 | 优视科技有限公司 | Page screenshot processing method and device based on mobile terminal browser |
| CN104462125B (en) * | 2013-09-18 | 2019-09-17 | 腾讯科技（深圳）有限公司 | Generate the method and device of webpage capture |
| CN104598902A (en) * | 2015-01-29 | 2015-05-06 | 百度在线网络技术（北京）有限公司 | Method and device for identifying screenshot and browser |
-
2017
- 2017-11-10 CN CN201711111579.9A patent/CN107885848B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN104965881A (en) * | 2015-06-12 | 2015-10-07 | 北京奇虎科技有限公司 | Method and device for extracting selected area from page |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107885848A (en) | 2018-04-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107885848B (en) | Webpage screen capturing method based on web technology | |
| CN103412928B (en) | Method and device for realizing browser page intelligent response-type layout on mobile terminal | |
| CN107766359B (en) | Method and device for converting page content into picture and computing equipment | |
| CN105975576B (en) | Terminal content adaptive display method and device and terminal | |
| CN103365862B (en) | It is a kind of for generating the method and apparatus of picture corresponding with the page | |
| CN105955888B (en) | Page debugging preview method and system | |
| CN102779167A (en) | Method and system for displaying webpage in mobile terminal | |
| CN102663126A (en) | Method and device for displaying webpage in mobile terminal | |
| CN102364460B (en) | Automatic page amplification method and system based on mobile terminal | |
| US9117314B2 (en) | Information output apparatus, method, and recording medium for displaying information on a video display | |
| CN104050238A (en) | Map labeling method and map labeling device | |
| US9679075B1 (en) | Efficient delivery of animated image files | |
| EP4198773A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
| CN108647348A (en) | Textual presentation method, apparatus, equipment and storage medium | |
| DE102016015381A1 (en) | Using Bloom filters to simplify the expansion and subdivision of a dynamic font | |
| CN106960062A (en) | Webpage capture method and system | |
| CN111913566A (en) | Data processing method and device, electronic equipment and computer storage medium | |
| CN109656652A (en) | Webpage graph making method, apparatus, computer equipment and storage medium | |
| CN110019037A (en) | A kind of pdf document methods of exhibiting, device, equipment and storage medium | |
| CN112148398B (en) | Image processing method and device | |
| CN111428452A (en) | Comment data storage method and device | |
| CN105260353A (en) | Typesetting method and device for mobile terminal | |
| CN112507257B (en) | Webpage display method, device, equipment and storage medium | |
| CN114791988A (en) | Browser-based PDF file analysis method, system and storage medium | |
| CN111915705B (en) | Picture visual editing method, device, equipment and medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP03 | Change of name, title or address |
Address after: 310000 Rooms 103-27, Building 19, No. 1399, Liangmu Road, Cangqian Street, Yuhang District, Hangzhou, Zhejiang Patentee after: Hangzhou Meichuang Technology Co.,Ltd. Address before: 12 / F, building 7, Tianxing International Center, 508 Fengtan Road, Gongshu District, Hangzhou City, Zhejiang Province 310011 Patentee before: HANGZHOU MEICHUANG TECHNOLOGY CO.,LTD. |
|
| CP03 | Change of name, title or address |